在这个简化的例子中,我有 4 个圆圈,每个圆圈都有不同的边框宽度,我试图在每个圆圈中保持相同的行高,以保持它们水平对齐。
然而,边框宽度似乎会影响行高(尽管在技术上是在盒子之外?)
有没有办法在不手动调整每个行高的情况下解决这个问题?
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;
示例:http: //jsfiddle.net/vcJ3G/
在这个简化的例子中,我有 4 个圆圈,每个圆圈都有不同的边框宽度,我试图在每个圆圈中保持相同的行高,以保持它们水平对齐。
然而,边框宽度似乎会影响行高(尽管在技术上是在盒子之外?)
有没有办法在不手动调整每个行高的情况下解决这个问题?
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;
示例:http: //jsfiddle.net/vcJ3G/
您可以删除 line-height,display:table-cell
改为使用并添加vertical-align:middle;
到您的 stat 类。
.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;
}
遇到这个,我想自己怎么可能不使用表格单元来做到这一点,我的解决方案可能不是最好的,但我还是决定分享它。 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%);
}