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>

---

UPDATED VERSION USING FLEX

Below is an updated version for this solution using flex. This solution means you don't have to set any fixed witdths on the spans.

.progress-ww div {
  display: flex;
}

.progress-ww div span {
  flex: 1;
}

.progress-ww div span:first-of-type {
  text-align: right;
  padding-right: 5px;
}

.progress-ww div span:last-of-type {
  padding-left: 5px;
}

<section>
  <div class="progress-ww">
    <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>
</section>

Answer 2

im assuming you arent locked into using that html structure. as such i would not only use list items to display this series of items, but i would also wrap each section of them in span tags. The perk to this solution is you are not locked into arbitrary widths for the left and right sections (you just have to worry about the width of the hyphen)

js fiddle: http://jsfiddle.net/seLvC/8/

HTML

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

CSS

*,
*:before,
*:after{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;
}
ul{
    list-style-type:none;
}
    ul li{
        width:100%;
        position: relative;
    }
        ul li span{
            position: absolute;
            right:0;
            left:50%;
            text-align:left;
            padding-left:5px;
            display:inline-block;
        }
        ul li span:first-child{
            position: absolute;
            left:0;
            right:50%;
            text-align:right;
            padding-right:5px;
            display:inline-block;
        }
.hyphen{
    display:inline-block;
    width:10px;
}

EDIT: removed hyphen class and adjusted css order for IE8 compatibility - thanks to GCyrillus for the suggestion