HTML/CSS

Вертикальное выравнивание текста в блоке

Способ выравнять текст по вертикали в блоках фиксированной высотой. Текст обворачивается в тег с классом .child, а за ним добавляется пустой тег с классом .helper.

Важно чтобы между тегами child и helper не было пробелов и переносов строк, как показано в примере:

<div><span class="child">Текст который нужно выровнять</span><span class="helper"></span></div>

И CSS стили:

/* Вертикальное выравнивание */
.child {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    zoom:1;
    //display:inline;
}
.helper {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
    zoom:1;
    //display:inline;
}

Пример с текстом:

<div>
  <div><span class="child">Быстрая доставка</span><span class="helper"></span></div>
  <div><span class="child">Скидки клиентам, сезонные акции</span><span class="helper"></span></div>
  <div><span class="child">Большой ассортимент товаров...</span><span class="helper"></span></div>
  <div><span class="child">Гарантия от 1 года</span><span class="helper"></span></div>
</div>
<div>
  <div><a class="child" href="#">Быстрая доставка</a><span class="helper"></span></div>
  <div><a class="child" href="#">Скидки клиентам, сезонные акции</a><span class="helper"></span></div>
  <div><a class="child" href="#">Большой ассортимент товаров...</a><span class="helper"></span></div>
  <div><a class="child" href="#">Гарантия от 1 года</a><span class="helper"></span></div>
</div>
07 декабря 2016