Twitter Bootstrap：进度条上的中心文本

Question

我一直在使用Twitter的bootstrap，我希望进度条上的文字以on条为中心，无论其价值如何。

以下链接就是我现在所拥有的。我希望所有文字都与最底部的标签对齐。

截图：

我已经尝试使用纯CSS，我尽量避免使用JS，但如果这是最干净的方法，我愿意接受它。

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>

Answer 1

带有实用程序类的Bootstrap 4.0.0：（感谢 MaPePeR 添加）

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

---

Bootstrap 3：

Boostrap现在支持进度栏中span元素中的文本。 Bootstrap示例中提供的HTML。 （请注意，课程sr-only已删除）

HTML：

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

...但它确实只根据栏本身居中，所以我们需要一些自定义CSS。

将其粘贴到另一个样式表/下方，您可以在其中加载bootstrap的css：

CSS：

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
 }

JsBin文件： http://jsbin.com/IBOwEPog/1/edit

---

Bootstrap 2：

将其粘贴到另一个样式表/下方，您可以在其中加载bootstrap的css：

/**
 * Progress bars with centered text
 */
.progress {
    position: relative;
}

.progress .bar {
    z-index: 1;
    position: absolute;
}

.progress span {
    position: absolute;
    top: 0;
    z-index: 2;
    color: black; /* Change according to needs */
    text-align: center;
    width: 100%;
}

然后在.bar：

之外添加span元素，将文字添加到进度条

<div class="progress">
    <div class="bar" style="width: 50%"></div>
    <span>Add your text here</span>
</div>

JsBin： http://jsbin.com/apufux/2/edit

Answer 2

为了让它正常工作，无论你的文字多久看一遍

http://jsfiddle.net/b5tbG/

你需要从div中取出文本

Answer 3

Bootstrap 3回答，如bootstrap示例中所示

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