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

您需要为您的span元素

应用position: absolute;

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>

文本应以style =“text-align：center”

为中心

如何居中对齐bootstrap进度条？

2 个答案: