我已将代码与CSS放在jsfiddle中……
https://jsfiddle.net/8oafjzrm/1/
我有4个圆圈,我想以其标题为中心,其中的标签也应以该形状为中心。我似乎无法使其按需运行。我试图将圆内的标签移到其自己的div,但随后完全移开了。这是html ...
<div class="container-fluid">
<div class="circles">
<div class="row">
<div class="col-md-6">
<div class="circle-title">Total Users</div>
<div class="circle"></div>
<div class="circle-text">6</div>
</div>
<div class="col-md-6">
<div class="circle-title">Active Users</div>
<div class="circle">6</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="circle-title">Total Logged</div>
<div class="circle">2,497</div>
</div>
<div class="col-md-6">
<div class="circle-title">Overall</div>
<div class="circle">76%</div>
</div>
</div>
</div>
</div>
我正在尝试的css可能超出了我的需要,但是我只是想尝试一种解决方案...
.circle {
height: 300px;
width: 300px;
background-color: #d6d6d6;
border-radius: 50%;
line-height: 100px;
}
.circle-text {
text-align: center;
color: white;
font-size: 7.5em;
font-weight: bold;
position: absolute;
padding: 0;
margin: 0 auto;
}
.circle:before {
height: 0px;
width: 0px;
line-height: 100px;
text-align: center;
position: absolute;
}
.circle-title {
color: #653487;
font-size: 30px;
font-weight: bold;
text-align: center;
padding: 30px;
}