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 hyphe

Answer 1

Demo fiddle

If you want to use some jQuery (for example, if you cant change your HTML), another alternative may be:

HTML

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

CSS

.progress-ww {
    font-size: 0.8rem;
    line-height:0.8rem;
    text-align:center;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}
.right:after {
    content:' -';
    margin-right:5px;
}
.left, .right {
    display:inline-block;
    width:50%;
}

jQuery

$('.progress-ww div').each(function () {
    var part = $(this).text().split(' - ')
    $(this).replaceWith("<div class='right'>" + part[0] + "</div><div class='left'>" + part[1] + "</div>");
});