具有不同边框宽度的等高线高度(边框)

Question

在这个简化的例子中,我有4个圆,每个圆都有不同的边框宽度,我试图在每个圆中保持相等的线高,以保持它们水平对齐.

然而边界宽度似乎影响线高(尽管技术上是在框外？)

无论如何都可以解决这个问题,而无需手动调整每个线高？

width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;

示例:http://jsfiddle.net/vcJ3G/

Answer 1

您可以删除行高，改用display:table-cell并添加vertical-align:middle;到您的 stat 类中。

jsFiddle 示例

.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;
}