图像对齐未正确设置为右上角答案

【问题标题】：image alignment not properly set to the top right corner图像对齐未正确设置为右上角
【发布时间】：2020-09-09 19:28:28
【问题描述】：

我正在尝试在卡片的右上角设置icon，但我无法对齐所有内容。

应该是这样的：

但它看起来像：


<Card style={{ width: '16rem', border: 'none', margin: '10px', borderRadius: '20px'}}>
                        <div>
                            <Card.Img variant="top" src={Dj} className="img-card img-card-small" />
                            <div className="blue-circle-icon">
                                <img src={LiveIcon}
                                    alt="live-icon"
                                    className="icon-tag"/>
                            </div>
                        </div>
                        <Card.Body style={{borderRadius: '20px'}}>
                            <Card.Text style={{fontFamily: 'SourceSansPro', 
                                    fontSize: '14px', 
                                    fontWeight: 'normal',
                                    fontStretch: 'normal',
                                    fontStyle: 'normal',
                                    lineHeight: '1.6',
                                    letterSpacing: 'normal',
                                    textAlign: 'center',
                                    color: '#616161'}}>
                            Anyone can apply to earn money by hosting a live-streaming or in-person experience                            
                            </Card.Text>
                        </Card.Body>
                    </Card>

css 是：

.img-card {
    object-fit: contain;
    border-radius: 20px;

}

.blue-circle-icon {
    background-color: #14cff0;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    margin-left: auto;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: auto;
}

.icon-tag {
    height: 20px;
    width: auto;

}

因此，如果有人知道如何确保white icon 始终位于blue circle 的中心，如何让blue circle 始终位于图像的右上角...我很乐意有一些输入。

另外，我尝试在图像周围应用一个边框半径，但我不能这很奇怪.. 它只是在底部这样做

谢谢

【问题讨论】：

标签： css reactjs react-bootstrap

【解决方案1】：

白色图标始终位于蓝色圆圈的中心：

将position: relative; 添加到.blue-circle-icon 类并将以下css 添加到.icon-tag

.icon-tag {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}

类似地，让蓝色圆圈始终位于图像的右上角：

将position: relative; 添加到.blue-circle-icon 和.img-card 的父级div 中，然后将css 添加到.blue-circle-icon

.blue-circle-icon {
  position: absolute;
  top: -20px;    <= adjust these as per your need
  right: -20px;  <= adjust these as per your need
}

但是这里的图标将相对于父 div 定位，如果可以将 .blue-circle-icon 作为孩子放在 .img-card 内，那么将 .img-card 提供给 position: relative; 以确保图标始终相对于卡片定位。

【讨论】：