How to center align bootstrap progressbar?

Question

I'm trying to center the text inside a progressbar using twitter-bootstrap framework v3.0.0.

I've tried this solution, but I'm afraid not working on the new version of the framework.

So I tried this:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>HELLO</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div> 
  <span>HELLO</span>
</div>

Here is the fiddle: http://jsfiddle.net/HuFw4/

As you can see it centers the text in the filled part or in the empty part, but not respect all the content.

Do you have any idea, or advice advice to do it?

score 5 · Accepted Answer · answered Oct 28 '13 at 08:18

5

You need to apply position: absolute; for your span element

try this demo

answered Oct 28 '13 at 08:18

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 2 · answered Oct 28 '13 at 08:23

Try this:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; text-align:center">
    HELLO
  </div>
</div>

The text should be centered by style="text-align:center"

How to center align bootstrap progressbar?

2 Answers2