How to center text in bootstrap 3 progress bar?

Question

I'm trying to display a progress bar, using Bootstrap 3, with the following code:

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

Screenshot of output:

However, this causes the text '60%' to be displayed towards the right, rather than in the center of the progress bar. How can I center this text, so it appears in the center?

Answer 1

I would put a class on the span tag, and put the tag before the progress-bar class. Then set the span to position:absolute and give 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;
}

See demo: http://jsfiddle.net/bozdoz/fSLdG/2/

Answer 2

Adding to @bozdoz answer:

Absolutely positioning the progress percentage indicator will do the trick:

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;
}

Fiddle: http://jsfiddle.net/Varinder/ejgp5/

Answer 3

Twitter's bootstrap .span classes are floated to the left. Try adding float:none to the span it might work!

.progress span{
   margin: 0px auto;
   float:none;
}

UPDATE: This works for sure: HTML

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

CSS:

 .progress {
    position: relative;
 }

 .bar {
    z-index: 1;
    position: absolute;
  }

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