Click Upvote Click Upvote - 3 months ago 32
CSS Question

How to center text in bootstrap 3 progress bar?

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:

screenshot

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

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/