How to vertically align text in progress bar bootstrap

Question

I decided to change height of the progress bar but the text doesnt seem to align vertically inside the progress bar.

here is the jsfiddle i made.

jsfiddle

<div class="container">
    <div class="progress" style="height:40px;">

  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 27%">
   <span style="" id="spanP">60%</span>
  </div>

</div>
</div>

Answer 1

Change line-height of your span.

<div class="container">
    <div class="progress" style="height:40px;">

  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 27%">
   <span style="line-height: 39px;" id="spanP">60%</span>
  </div>

</div>
</div>

Regards