如何在bootstrap 3进度条中居中文本？

Question

我正在尝试使用Bootstrap 3显示进度条,其中包含以下代码:

   <div class="progress">
        <div class="progress-bar" style="width: 60%;">
        </div>
        <span>60%</span>
    </div>

输出屏幕截图:

但是,这会导致文本"60%"显示在右侧,而不是显示在进度条的中心.如何将此文本居中,以便它出现在中心？

Answer 1

我会在span标记上放一个类,并将标记放在progress-bar类之前.然后将跨度设置为position:absolute并给出进度text-align:center:

HTML:

<div class="progress">
    <span class="progress-value">60%</span>
    <div class="progress-bar"></div>
</div>

CSS:

.progress {
    text-align:center;
}
.progress-value {
    position:absolute;
    right:0;
    left:0;
}

见演示:http://jsfiddle.net/bozdoz/fSLdG/2/

Answer 2

添加到@bozdoz答案:

绝对定位进度百分比指标将起到作用:

HTML

<div class="progress">
    <div class="progress-bar" style="width: 60%;">
    </div>
    <span>60%</span>
</div>

CSS

.progress {
    position:relative;
}
.progress span {
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    z-index:2;
    color:white;
}

小提琴:http://jsfiddle.net/Varinder/ejgp5/