我无法将圆形边框与其上方的文本对齐,也无法将文本居中放置在圆圈内。当我在我的 .oval
类中注释掉 width: 80px;
时,它看起来是对齐的,但是圆圈随后变形了
<div class="container body-content">
<div class="row tab-content">
<div class="jumbotron">
<h1>Welcome, Admin</h1>
<p class="lead">Please select one of the tabs above to begin</p>
</div>
<div class="row adminrow">
<div class="col-xs-2 col-xs-offset-1">
<h4>Total Users</h4>
<div class="oval">
<h4>100</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Unauthorized Users</h4>
<div class="oval">
<h4>25</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Total Games</h4>
<div class="oval">
<h4>0</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Games Played</h4>
<div class="oval">
<h4>80</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Investigator Groups</h4>
<div class="oval">
<h4>2</h4>
</div>
</div>
</div>
</div>
</div>
我的CSS类如下
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 30px;
}
.jumbotron {
text-align: center;
}
.adminrow {
text-align: center;
}
.oval {
width: 80px;
height: 80px;
border-radius: 50%;
background: #000000;
color: white;
text-align: center;
}
最佳答案
添加这个会达到您想要的效果吗?
.oval {
line-height: 80px;
}
关于html - 对齐圆形边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32616520/