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

时间:2013-08-07 14:50:46

标签: css css3

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

然而,边框宽度似乎会影响线条高度(尽管技术上是在框外?)

无论如何都可以在不手动调整每个线高的情况下解决这个问题吗?

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

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

3 个答案:

答案 0 :(得分:4)

您可以移除行高,改为使用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;
}

答案 1 :(得分:1)

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

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

}

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

答案 2 :(得分:-1)

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