边框宽度变化的等高线高度(边框)

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

Answer 2

您的css工作正常，您所要做的就是从顶部删除一些。

* {
    margin: 0px;
    padding: 0px;

}

http://jsfiddle.net/techsin/vcJ3G/15/

Answer 3

我偶然发现了这一点，我想，不使用表格单元是怎么可能做到的，我的解决方案可能不是最好的，但我还是决定分享它。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%);
}