Bootstrap 3: Text in progress bar getting cut off - html

Question

The text inside of my progress bars are getting cut off on the top. I'd like to move the text to the middle of the progress bar.
How can I do so?
I've tried position: relative; and top: 40px but that is causing issues for me when I dynamically change the number (with JS). Oddly, the number is getting cut off on the top even when it appears in the middle of the progress bar. Even more odd is that is only happening in Chrome (FF and IE work fine).
Notice in this image, only the bottom changed, but the top part didn't:
So, I included a live example WITHOUT the relative positioning, I'm thinking that that is the reason things are wacky. Can you guys figure out how to just move the text down to the middle without relative positioning? Or just figure out how to prevent the number from getting cut off with the relative positioning?
Also, I don't want absolute positioning either because the number needs to remain in the middle of each individual progress bar.
LIVE EXAMPLE: 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

If you add padding-top:75px; display:inline-block; to the .progress span rule, it will achieve the desired effect.
jsFiddle