css - 无法居中 CSS 形状和文本
问题描述
我已经将代码放在带有 css 的 jsfiddle 中……</p>
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;
}
解决方案
推荐阅读
- three.js - 实例几何截锥体剔除
- python - 使用 odoo 10 创建多条记录
- ruby-on-rails - Rails 5 - 活动存储 - 变体 - 例外:“#
Rails 5.2.0(作为 API)
/config/application.rb
config.active_storage.variant_processor = :vips
- javascript - 格式化 Imagemapster 选择
- javascript - 使用 NodeJS 读取目录中的所有文件
- node.js - npm vs 节点版本号
- javascript - Angular:使用颜色选择器输入更改颜色 css 变量
- javascript - 使用 AngularJs 和 PHP 发布有效负载并接收响应
- c# - 使用 lambda 在类列表中查找类列表
- python - Jupyter notebook is extremely slow when re-running cells