Вертикальное выравнивание текста в блоке (child-helper)

Вертикальное выравнивание текста в блоке (child-helper)

Старый метод «child-helper» для выравнивания текста по вертикали в блоках с фиксированной высотой.

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

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

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

CSS стили для span:

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

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

<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
.list {
	overflow: hidden;
}
.list div {
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	text-align: center;
	background: #eee;
	line-height: 18px;
}

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

Результат:

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

<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

CSS:

.list {
	overflow: hidden;
}
.list div {
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	text-align: center;
	background: #eee;
	line-height: 18px;
}

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

Результат:

07.12.2016, обновлено 29.07.2022
6101

Комментарии

, чтобы добавить комментарий.

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

Как отключить тег br
Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими способами.
6272
0
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
34272
+9
Текст в две колонки
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
41763
+2
Выравнивание блока по центру родителя
Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.
19088
+4
Выравнивание блоков на всю ширину (justify)
Как в горизонтальным меню, метод с justify и after 100% можно использовать для выравнивания других элементов в одну...
7724
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
30305
+31