javascript - 集中一个圆形边框

Question

我有下面的代码，我试图把一个数字放在一个圆圈里，一个字形图标和下面的标签。字形和标签已经居中对齐，但我仍然无法让圆圈和数字居中对齐。伙计们，知道怎么做吗？

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>

Don´t forget to center all elements inside the container, you can achieve this by setting .text-center class, or use text-align: center

DEMO HERE