集中了一個圓形邊框

我有下面的代碼，我試圖把一個數字放在下面的一個圓圈，一個圖形和標籤中。圖形和標籤已經對齊了中心，但我仍然無法找到圓和數字來對齊中心。任何想法如何做到這一點？集中了一個圓形邊框

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

來源

2015-11-09 Coolguy

使用'保證金：0汽車;'在'.numberCircle'類。 [演示]（https://jsfiddle.net/DTcHh/14099/） – jbutler483

只需添加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

來源

2015-11-09 09:41:11

集中了一個圓形邊框

回答

相關問題