Bootstrap 3：进度条中的文本被切断

Question

我的进度条内的文字正在顶部被切断。我想将文本移动到进度条的中间。

我该怎么办？

我已经尝试了position: relative;和top: 40px，但是当我动态更改数字时（使用JS），这会给我带来问题。奇怪的是，即使它出现在进度条的中间，这个数字也会被切断。更奇怪的是，这只发生在Chrome中（FF和IE正常工作）。

请注意，在此图片中，只有底部发生了变化，但顶部没有变化：

所以，我提供了一个没有相对定位的实例，我认为这就是事情古怪的原因。你们可以弄清楚如何在没有相对定位的情况下将文本向下移动到中间吗？或者只是弄清楚如何防止数字被相对定位切断？

此外，我不想要绝对定位，因为数字需要保留在每个单独进度条的中间。

直播示例： http://jsfiddle.net/SeTXK/1/

HTML：

<div class="row">
    <div class="col-md-12">
        <div class="content">
            <h2>Summary</h2>
            <div class="progress text-center">
                <div class="progress-bar progress-bar-success" role="progressbar">
                    <span id="output-expenses">$0.00</span>
                </div>
                <div class="progress-bar progress-bar-warning" role="progressbar">
                    <span>$0.00</span>
                </div>
                <div class="progress-bar progress-bar-danger" role="progressbar">
                    <span>$0.00</span>
                </div>
                <div class="progress-bar progress-bar-income" role="progressbar">
                    <span id="output-income"></span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.progress {
  height: 100px;
  margin-bottom: 0;
  border-radius: 10px;
  /*background-color: #c4ffc4;*/
}

.progress span {
    /*position: relative;
    top: 40px;*/
    color: #292929;
    font-weight: bold;
    font-size: 4em;
    font-family: 'Cinzel', serif;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.progress-bar-success {
    width: 30%;
}

.progress-bar-warning {
  width: 20%;
}

.progress-bar-danger {
  width: 20%;
}

.progress-bar-income {
    background-color: #f5f5f5;
    -webkit-box-shadow: inset 0 5px 8px rgba(0,0,0,0.1);
  box-shadow: inset 0 5px 8px rgba(0,0,0,0.1);
  width: 30%;
}

Answer 1

如果您将padding-top:75px; display:inline-block;添加到.progress span规则，则会达到预期的效果。

jsFiddle