我一直在使用Twitter的引导，我希望进度栏上的文本中心在on bar，无论价值。
屏幕截图：
我试过我的最好的纯CSS，我尽量避免使用JS，如果可能，但我愿意接受它，如果它是最干净的方式做到。
<div class="progress">
<div class="bar" style="width: 86%">517/600</div>
</div>
解决方法
引导3：
Boostrap现在支持进度栏中span元素内的文本。在Bootstrap的例子中提供的HTML。 (注意删除类sr-onlyis)
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>
…但它只是根据bar本身的中心文本，所以我们需要一点点自定义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
引导2：
将它粘贴到另一个样式表/下面，你加载bootstrap的css：
/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.bar {
z-index: 1;
position: absolute;
}
.progress span {
position: absolute;
top: 0;
z-index: 2;
color: black; // You might need to change it
text-align: center;
width: 100%;
}
<div class="progress">
<div class="bar" style="width: 50%"></div>
<span>Add your text here</span>
</div>
