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%;
}

然后通过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

Answer 2

为了使它正常工作,无论你的文字有多长,看看这里

http://jsfiddle.net/b5tbG/

你需要从div中取出文本