html - 如何在 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 类之前。然后将span设置为position:absolute并给progress 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/