CSS Twitter Bootstrap：在进度条上居中文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12937470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: Center Text on Progress Bar
提问by Thomas Maurstad Larsson
I've been using Twitter's bootstrap and I would like the text on the progress bar to be centered on the on bar regardless of value.
我一直在使用 Twitter 的引导程序，我希望进度条上的文本无论值如何都以 on 条为中心。
The below link is what I have now. I would like all text to be aligned with the bottom most bar.
下面的链接是我现在所拥有的。我希望所有文本都与最底部的栏对齐。
Screenshot:
截屏：
I've tried my best with pure CSS and I'm trying to avoid using JS if possible but I'm willing to accept it if it's the cleanest way to do it.
我已经尽我最大的努力使用纯 CSS，如果可能的话，我试图避免使用 JS，但如果这是最干净的方式，我愿意接受它。
<div class="progress">
<div class="bar" style="width: 86%">517/600</div>
</div>
回答by Thomas Maurstad Larsson
Bootstrap 4.0.0 with utility classes:(Thanks to MaPePeRfor the addition)
带有实用程序类的 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:
引导程序 3：
Bootstrap now supports text within a span element in the Progress bar. HTML as provided in Bootstrap's example. (Notice the class sr-onlyis removed)
Bootstrap 现在支持进度条中 span 元素内的文本。Bootstrap 示例中提供的 HTML。（注意该类sr-only已被删除）
HTML:
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>
... It does however only center the text according to the bar itself, so we need a little bit of custom CSS.
... 然而，它只是根据栏本身将文本居中，所以我们需要一点自定义 CSS。
Paste this in another stylesheet/below where you load bootstrap's css:
将此粘贴到另一个样式表/下面，您可以在其中加载引导程序的 css：
CSS:
CSS：
/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.progress span {
position: absolute;
display: block;
width: 100%;
color: black;
}
JsBin file:http://jsbin.com/IBOwEPog/1/edit
JsBin 文件：http ://jsbin.com/IBOwEPog/1/edit
Bootstrap 2:
引导程序 2：
Paste this in another stylesheet/below where you load Bootstrap's CSS:
将此粘贴到另一个样式表/下面，您可以在其中加载 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%;
}
Then add text to a progress bar by adding a spanelement outside .bar:
然后通过在span外部添加元素将文本添加到进度条.bar：
<div class="progress">
<div class="bar" style="width: 50%"></div>
<span>Add your text here</span>
</div>
JsBin:http://jsbin.com/apufux/2/edit
JsBin：http ://jsbin.com/apufux/2/edit
回答by Caelea
For it to work properly, no matter how long your text is have a look here
为了它正常工作，无论你的文字有多长，看看这里
You'll need to take the text out of the div
您需要将文本从 div 中取出
回答by Anonymous
Bootstrap 3 answer, as shown in bootstrap example
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>
