How to center text in bootstrap 3 progress bar?

css, html, twitter-bootstrap

Solution

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/

Problem

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?

Original source