如何在Bootstrap 3进度栏中居中显示文本？
点击升级
我正在尝试使用Bootstrap 3通过以下代码显示进度条：
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
<span>60%</span>
</div>
屏幕截图：
但是，这会使文本“ 60％”显示在右侧，而不是在进度栏的中央。如何使该文本居中，使其出现在中心？
博兹多斯
我将在span标签上放置一个类，并将该标签放在进度栏类之前。然后将范围设置为position:absolute并给出进度text-align:center：
HTML：
<div class="progress">
<span class="progress-value">60%</span>
<div class="progress-bar"></div>
</div>
CSS：
.progress {
text-align:center;
}
.progress-value {
position:absolute;
right:0;
left:0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在Bootstrap 3进度栏中居中显示文本？
- 2
Bootstrap进度栏-无论进度如何，文本均居中
- 3
如何在Bootstrap 3中为进度栏设置动画？
- 4
如何在Bootstrap 3中增加进度栏的限制
- 5
如何在mplayer中显示进度栏？
- 6
如何在跨度中居中显示文本？
- 7
如何在QComboBox中居中显示文本？
- 8
如何在AvalonEdit中居中显示文本？
- 9
如何在ListView中居中显示文本？
- 10
如何在QGraphicsSimpleTextItem中居中显示文本？
- 11
如何在跨度中居中显示文本？
- 12
如何在Bootstrap 4中为进度栏设置动画？
- 13
如何在Bootstrap 3中动态更改进度栏类？
- 14
使用Bootstrap进度栏在模态中显示上传进度
- 15
如何在每个循环的进度栏中设置文本标签？
- 16
如何在导航栏中垂直居中放置文本？
- 17
文本不在导航栏中居中显示/如何使<br>大小减半/导航栏文本之间的间距太大
- 18
如何在Bootstrap3中将响应图像旁边的文本居中
- 19
如何在Bootstrap3中使响应图像旁边的文本居中
- 20
如何在导航栏中居中显示菜单项
- 21
如何在导航栏品牌 Bootstrap 4 中显示图像 + 文本？
- 22
如何在Bootstrap的此导航栏中更改文本的颜色？
- 23
如何在Bootstrap 3模式中居中输入？
- 24
如何在Bootstrap 3中居中放置表格
- 25
如何在Bootstrap 3中垂直居中放置文字？
- 26
如何在Bootstrap 3的列中居中放置内容
- 27
Bootstrap 3进度栏设置过渡完成后的文本
- 28
如何在 Bootstrap Div 中居中
- 29
如何在进度栏中显示图像加载进度c＃
我来说两句