How to center text in bootstrap 3 progress indicator?

Question

I am 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:

However, this leads to the fact that the text "60%" is displayed to the right, and not in the center of the progress bar. How can I center this text, so it appears in the center?

Answer 1

I would put the class in the span tag and put the tag in front of the progress-bar class. Then set the interval position:absoluteand make 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 the demo: http://jsfiddle.net/bozdoz/fSLdG/2/

Answer 2

Adding to @bozdoz's answer:

:

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 bootstrap .spanclasses move left. Try adding float:noneto the range that it can work!

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

UPDATE: That's right: 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;
 } 

Answer 4

.progress{ border: 5px solid;}
.progress-bar{background: #369;line-height: 50px;display: inline-block;}
.progress span{display: block; margin: 0px auto; width: 40px; margin-top: -50px; line-height: 50px; color: #fff;}

Answer 5

try this, I used the tag <center> </center>, I'm not sure about backward compatibility, but I tested in Chrome and Mozilla Firefox, and there are current ones.

code example (does not need CSS):

<div class="progress progress-striped active" style="margin:0 10%;display:none;" id="uploadProgressbar">
        <center><b><span class="progress-value" id="uploadProgressValue" style="color:red;">00%</span> </b></center>
             <div class="progress-bar progress-bar-primary" role="progressbar" id="uploadProgress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">

             </div>
</div>