如何居中對齊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> 

文本應該是風格居中= 「文本對齊：中心」