html - Aligning text on a specific character

Question

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.

I've made a fiddle to make my problem clear: http://jsfiddle.net/seLvC/

my current code:

.progress-ww {
  font-size: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

<section>
  <div class="progress-ww">
    <div>
      <div>lopen - ik loop</div>
      <div>klimmen - ik klim</div>
      <div>geven - ik geef</div>
      <div>schreeuwen - ik schreeuw</div>
      <div>blozen - ik bloos</div>
    </div>
  </div>
</section>

Answer 1

One way of achiveing this is to place spans around the words on the left and right side of the hyphen. Then you can add a min-width to these to make them equal width which will put the hyphen in the center.

Fiddle

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;


}
.progress-ww span {
    display:inline-block;
    width:100px;
    text-align:left;
}
.progress-ww span:first-of-type {
    text-align:right
}

<section>
    <div class="progress-ww">
        <div>
            <div><span>lopen</span> - <span>ik loop</span></div>
            <div><span>klimmen</span> - <span>ik klim</span></div>
            <div><span>geven</span> - <span>ik geef</span></div>
            <div><span>schreeuwen</span> - <span>ik schreeuw</span></div>
            <div><span>blozen</span> - <span>ik bloos</span></div>
        </div>
    </div>
</section>