title: How to center text in bootstrap 3 progress bar?
body: <p>I'm trying to display a progress bar, using Bootstrap 3, with the following code:</p>
  
  <pre><code>   &lt;div class="progress"&gt;
          &lt;div class="progress-bar" style="width: 60%;"&gt;
          &lt;/div&gt;
          &lt;span&gt;60%&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Screenshot of output:</p>
  
  <p><img src="https://i.stack.imgur.com/26wHh.png" alt="screenshot"></p>
  
  <p>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?</p>