如何居中对齐bootstrap进度条？

Question

我正在尝试使用twitter-bootstrap框架v3.0.0将文本置于进度条内部。

我试过this solution，但我恐怕没有在新版本的框架上工作。

所以，我想这一点：

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
    <span>HELLO</span> 
    </div> 
</div> 

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
    </div> 
    <span>HELLO</span> 
</div> 

这里是小提琴：http://jsfiddle.net/HuFw4/

正如你可以看到它集中在填充部分或空白部分的内容，但不尊重所有的内容。

你有什么想法或建议吗？

Answer 1

您需要申请position: absolute;您span元素

try this demo

Answer 2

试试这个：

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; text-align:center"> 
    HELLO 
    </div> 
</div> 

文本应该是风格居中= “文本对齐：中心”