title: How to center align bootstrap progressbar?
body: <p>I'm trying to center the text inside a progressbar using twitter-bootstrap framework v3.0.0.</p>
  
  <p>I've tried <a href="https://stackoverflow.com/a/17326764/2154101">this solution</a>, but I'm afraid not working on the new version of the framework.</p>
  
  <p>So I tried this:</p>
  
  <pre><code>&lt;div class="progress"&gt;
    &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
      &lt;span&gt;HELLO&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="progress"&gt;
    &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
    &lt;/div&gt; 
    &lt;span&gt;HELLO&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/HuFw4/" rel="nofollow noreferrer">http://jsfiddle.net/HuFw4/</a></p>
  
  <p>As you can see it centers the text in the filled part or in the empty part, but not respect all the content.</p>
  
  <p>Do you have any idea, or advice advice to do it?</p>