我有下面的代码,我试图把一个数字放在一个圆圈里,一个字形图标和下面的标签。字形和标签已经居中对齐,但我仍然无法让圆圈和数字居中对齐。伙计们,知道怎么做吗?
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;
}
最佳答案
只需将 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 usetext-align: center
关于javascript - 集中一个圆形边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33606123/