title: Aligning text on a specific character
body: <p>I have this list of words i want to align on the center, every list item consists of two words divided by a '-'(hyphen). Is there an easy way i can align spot on the hyphen? When words are different in lenght now, the hyphen isn't in the center anymore.</p>
  
  <p>I've made a fiddle to make my problem clear:
  <a href="http://jsfiddle.net/seLvC/" rel="noreferrer">http://jsfiddle.net/seLvC/</a></p>
  
  <p>my current code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progress-ww {
    font-size: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="progress-ww"&gt;
      &lt;div&gt;
        &lt;div&gt;lopen - ik loop&lt;/div&gt;
        &lt;div&gt;klimmen - ik klim&lt;/div&gt;
        &lt;div&gt;geven - ik geef&lt;/div&gt;
        &lt;div&gt;schreeuwen - ik schreeuw&lt;/div&gt;
        &lt;div&gt;blozen - ik bloos&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>