Question

我有以下编码，我正在尝试将数字放在一个圆圈，下面是一个字形和标签。 glyphicon和标签已经对齐中心，但我仍然无法得到圆圈和数字对齐中心。知道如何做到这一点吗？

HTML：

<div id="ttlwait" class="col-xs-3">
    <div id="circlePos" class="col-xs-12">
        <div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
        <div style="text-align:center;">
            <span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>
        </div>
        <p id="gly-userw" style="text-align:center;">People</p>
</div>

的CSS：

#ttlwait{
    background-color:yellow;
}
.numberCircle{
    font-size:8vmin;
    color:red;
    border: 2px solid red;
    border-radius: 50%; 
    height:12vmin; 
    width:12vmin;
}

JSFIDDLE

Answer 1

只需将display:inline-block添加到.numberCircle，并将所有项目置于容器内。

<强> CSS

.numberCircle {
    font-size:8vmin;
    color:red;
    border: 2px solid red;
    border-radius: 50%;
    height:12vmin;
    width:12vmin;
    display: inline-block;
}

<强> HTML

<div id="ttlwait" class="col-xs-3">
    <div id="circlePos" class="col-xs-12 text-center">
        <div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
        <div style="text-align:center;"> <span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>

        </div>
        <p id="gly-userw" style="text-align:center;">People</p>
    </div>

不要忘记将所有元素集中在容器内，你可以通过设置.text-center类或使用text-align: center
来实现此目的

<强> DEMO HERE

集中一个圆形边框

1 个答案: