css - 具有不同边框宽度的相同行高（边框框）

Question

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

然而，边框宽度似乎会影响行高（尽管在技术上是在盒子之外？）

有没有办法在不手动调整每个行高的情况下解决这个问题？

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

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

Answer 1

您可以删除 line-height，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%);
}