进度条的代码是:
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
我想写一个文本并将其放在那些堆积的进度条的中心。
示例来自bootstrap网站,我的代码类似,只是我在同一个中只使用了2个进度条。但通常情况下,解决方案应适合任何情况。
建议?
答案 0 :(得分:0)
没有css我无法重现你的进度条。您应该尝试添加属性text-align:center;在div的div里面,例如:
<div class="progress-bar progress-bar-success" style="width: 35%;text-align:center;">
试试这个,让我知道它是否有效
答案 1 :(得分:0)
只需将每个进度条设为div(就像您已经拥有的那样),然后将文本包装在该div中,然后将text-align:center;
答案 2 :(得分:0)
CSS
.progress-info {
position: absolute;
width: 100%;
text-align: center;
}
HTML
<div class="progress">
<div class="progress-info">Hello, World!</div>
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>