在这个简化的例子中,我有4个圆圈,每个圆圈都有不同的边框宽度,我试图在每个圆圈中保持相等的线条高度,以保持它们水平对齐。
然而,边框宽度似乎会影响线条高度(尽管技术上是在框外?)
无论如何都可以在不手动调整每个线高的情况下解决这个问题吗?
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;
答案 0 :(得分:4)
您可以移除行高,改为使用display:table-cell
,并将vertical-align:middle;
添加到您的统计类。
<强> jsFiddle example 强>
.stat {
display: table-cell;
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
text-align: center;
margin: 10px;
font-size: 16px;
color: #1daeec;
text-transform: uppercase;
vertical-align:middle;
}
答案 1 :(得分:1)
答案 2 :(得分:-1)
碰到了这一点,并认为自己如何在不使用table-cell的情况下完成它,我的解决方案可能不是最好的,但我还是决定分享它。 http://codepen.io/svdovichenko/pen/rObzqM?editors=110
添加<span>1</span>
(可以使用垃圾邮件中的类不用于此示例)
.stat{
position: relative;
}
和
span {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}