具有不同边框宽度的等高线高度（边框）

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;添加到您的统计类。

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

Answer 2

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

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

}

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

Answer 3

碰到了这一点，并认为自己如何在不使用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%);
}