title: Bootstrap progressbar -- Get the text centered no matter the progress
body: <p>As you can see on the screenshot below, the text is centered in the middle of the progressbars' current progress.
  <a href="https://i.stack.imgur.com/AI1le.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AI1le.png" alt="enter image description here"></a>
  <strong>Is there a way</strong> to make this text '<strong>overlap</strong>' the progress, seperating it, and <strong>being centered of the entire width</strong>, and the progress would show behind?</p>
  
  <p>This would then be something like:
  <a href="https://i.stack.imgur.com/19Ze3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/19Ze3.png" alt="enter image description here"></a></p>
  
  <p>The code used for 4 progress bars are found <a href="http://getbootstrap.com/components/#progress" rel="noreferrer" title="Here">here. (regular docs)</a></p>
  
  <p>I do not have my own code posted, because I don't have any code to recreate what I want. </p>