gpt4 book ai didi

css - 圆圈内文本的跨浏览器垂直居中

转载 作者:行者123 更新时间:2023-11-28 12:08:57 27 4
gpt4 key购买 nike

我试图将文本置于圆圈内,并在 webkit 浏览器中成功完成,但在 Firefox 中不成功。这是我到目前为止所拥有的:http://codepen.io/anon/pen/qZqYdb

这是我的标记:

<span class="quantity-badge">10</span>

这是我的风格:

.quantity-badge {
display: table-cell;
width: 24px;
height: 24px;
text-align: center;
vertical-align: middle;
color: #fff;
border-radius: 50%;
background-color: #0896ea;
}

我将显示属性设置为 table-cell,这样添加 3 位数字会使徽章保持圆形。

如果比较 Chrome 和 Firefox 中的演示,您会注意到 Firefox 中的文本稍微靠近徽章的顶部。如何在所有浏览器中将文本垂直居中?

注意:我使用的是装有最新版本 El Capitan 的 Mac。

最佳答案

.quantity-badge {
display: block; /*Changed this*/
width: 24px;
height: 24px;
line-height:24px; /*Added this*/
padding:10px; /*Added this*/
text-align: center;
vertical-align: middle;
color: #fff;
border-radius: 50%;
-webkit-border-radius: 50%; /*Added this*/
background-color: #0896ea;
}

我希望这可以开始帮助你。这是您发布的代码的分支:http://codepen.io/anon/pen/EKNevV

关于css - 圆圈内文本的跨浏览器垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36016946/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com