вы можете обернуть свой текст в поле inline-block и установить width, сбросить text-align и дать отрицательный margin, чтобы уменьшить фактически его размер до нуля: http://jsfiddle.net / seLvC / 2 /

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;
}
.progress-ww span {
    display:inline-block;
    width:100px;/* give it a width */
    margin:0 -100px 0 0;/* 0 space needed on right side */
    text-align:left;
}
.progress-ww span:first-of-type {
    margin:0 0 0 -100px;/* 0 space needed on left side */
    text-align:right
}

[/g1]

Это заслуживает того, чтобы быть помеченным внутри списка <dl> <dt> <dd> , так как он похож на словарь. :)

im, предполагая, что вы не подключены к этой структуре html. поэтому я бы не только использовал элементы списка, чтобы отображать эту серию элементов, но я бы также обернул каждый раздел из них в теги span. Перк для этого решения заключается в том, что вы не заблокированы в произвольной ширине для левого и правого секций (вам просто нужно беспокоиться о ширине дефиса)

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: удалить класс дефиса и скорректировать порядок css для Совместимость IE8 - благодаря GCyrillus для предложения

Нет, нет простого способа выровнять конкретный символ и на самом деле никак не с данной разметкой HTML.

Разметка лучше всего заменяется на таблицу, потому что это, безусловно, самое надежный способ достижения желаемого внешнего вида (даже когда CSS отключен). Это также самый логичный подход, поскольку данные структурно являются таблицей соответствий. Использование dl не будет ошибкой, если мы примем принцип HTML5 dl как список описания (а не как список определений, как изначально определено). Но это не дает особых преимуществ и вызывает некоторые осложнения.

Пример:

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

Затем вы можете легко стилизовать таблицу по своему желанию. Я не уверен, что такое центрирование, но вы можете центрировать таблицу в целом (например, в CSS с table {margin: 0 auto}), или вы можете выравнивать первый столбец (td:first-child { text-align: right }).

Разметка была бы еще более логичной без дефисов в контенте. Вы можете опустить их и сгенерировать их в CSS с псевдоэлементом :before, если это вам подходит.

(я бы не использовал дефис «-» здесь, человеческие языки обычно не используют Дефис в этом случае. Я бы использовал en dash «-» или, возможно, двоеточие «:», которое часто используется для разделения форматов слов в парадигме.)

Демо-скрипт

Если вы хотите использовать некоторый jQuery (например, если вы не можете изменить свой HTML), другой альтернативой может быть:

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>");
});