当使用position:absolute时,无法将文本居中。

我正面临着魏氏行为与 span 当它的位置由 absolute.我想把文字放在一个圆圈里。

.close-icon {
  background: red;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 0.5rem;
  height: 0.75rem;
  justify-content: center;
  width: 0.75rem;
  align-items: center;
  position: absolute;
  right: 0.625rem;
  top: 0.375rem;
}
<span class="close-icon">X</span>

输出。output with absolute

没有位置 absolute:

background: red;
border-radius: 50%;
color: #ffffff;
display: flex;
font-size: 0.5rem;
height: 0.75rem;
justify-content: center;
width: 0.75rem;
align-items: center;

:输出。output without absolute

我找不到任何解决办法,也找不到发生这种情况的原因。如果有人能对这种行为做出一些说明,那就太好了。

PS:当我删除 right: 0.625rem 那么它是完全对准中心的。

解决方案:

你可以用这种方法解决。

<style>
    .close-icon {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: red;
        border-radius: 50%;
        color: #ffffff;
        font-size: 0.5rem;
        height: 0.75rem;
        width: 0.75rem;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>

但请考虑到你需要把它放在一个相对的元素里 这样它就能被放置在这个元素的中间了

给TA打赏
共{{data.count}}人
人已打赏
未分类

Canvas javascript drawImage方法

2022-9-8 22:00:37

未分类

Eloquent DataTables将所有的属性转换为字符串。

2022-9-8 22:00:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索