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

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

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

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

CSS стили

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

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

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

Пример с ссылками

<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>
HTML
07.12.2016, обновлено 27.08.2019 991
Предыдущая запись Clearfix

Поделится

Другие публикации

В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими...
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или...
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк, авто...