Ответ 1

Один из способов добиться этого - поместить spans вокруг слов слева и справа от дефиса. Затем вы можете добавить к ним минимальную ширину, чтобы сделать их равными по ширине, что поместит дефис в центр.

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>

Ответ 2

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 для предложения

Ответ 3

как я предложил в другом ответе, это может использовать теги <dl>, если имеет смысл семантика:

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

с 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

Ответ 4

Не очень чистый.. но решение тем не менее: http://jsfiddle.net/seLvC/5/.

CSS

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

.hyp {
    position:relative;
}
.first, .second {
    position:absolute;
    top:0;    
}
.first {
    right:18%;     
    padding-right:35%;
}
.second {
    left:18%;     
    padding-left:35%;
}

Извините, но я изменил ваш HTML:     

    <div class="hyp">
        -
        <div class="first">ik loop </div>
        <div class="second">lopen</div>
      </div>
      <div class="hyp">
        -
        <div class="first">klimmen </div>
        <div class="second">ik klim</div>
      </div>
      <div class="hyp">
        -
        <div class="first">geven  </div>
        <div class="second">ik geef</div>
      </div>
      <div class="hyp">
        -
        <div class="first">schreeuwen</div>
        <div class="second">ik schreeuw</div>
      </div>
      <div class="hyp">
        -
        <div class="first">blozen </div>
        <div class="second">ik bloos</div>
      </div>



      </div>

Ответ 5

Демо-скрипта

Если вы хотите использовать некоторый 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>");
});

Ответ 6

Нет, нет простого способа выровнять конкретный символ и на самом деле никак не с данной разметкой 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 "-" или, может быть, двоеточие ":", которое часто используется для разделения текстовых форм в парадигма.)

Ответ 7

вы можете обернуть текст в поле inline-block и установить width, reset 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
}

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