图像对齐方式未正确设置为右上角

Question

我正在尝试在卡片的右上角设置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始终位于图像的右上角……我将很高兴有一些输入。

此外，我试图在图像周围应用一个边界半径，但我做不到，这很奇怪。它只在底部这样做

谢谢

Answer 1

1. 白色图标始终以蓝色圆圈为中心：

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

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

1. 以同样的方式获得始终位于图像右上角的蓝色圆圈：

将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内作为子代，则将position: relative;提供给.img-card，以确保图标始终相对于卡片定位。