如何居中对齐bootstrap进度条？

Question

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

我尝试过这个解决方案,但我担心不会在新版本的框架上工作.

所以我尝试了这个:

<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元素

试试这个演示