Aligning text on a specific character

Solution 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>

Solution 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

Solution 3:

as I suggested in other answer , this could use the <dl> tags if semantics matters :

<div class="progress-ww">
  <dl>
    <dt>lopen</dt><dd>ik loop<br/>zij lopen</dd>
    <dt>klimmen</dt><dd>ik klim</dd>
    <dt>geven</dt><dd>ik geef</dd>
    <dt>schreeuwen</dt><dd>ik schreeuw</dd>
    <dt>blozen</dt><dd>ik bloos<br/>je bloos<br/>hij bloss</dd>
  </dil>
</div>

with css

.progress-ww {
  text-align:center;
  width:260px;
  /* margin : auto ; maybe ? */

}
dt , dd {
  width:100px;
  display:inline-block;
  vertical-align:top;
  margin:0;
  padding:0 5px 0 0;
}
dt {text-align:right;}
dd {text-align:left;}
dt:after {content:' -';}

DEMO

Solution 4:

Demo fiddle

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

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

.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%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>