Централизованная граница круга

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> 

Не забудьте центрировать все элементы внутри контейнера, вы можете достичь, установив .text-center класса, или использовать text-align: center

DEMO HERE