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

Два способа выравнять текст по вертикали в блоках с фиксированной высотой.

Текст обворачивается в тег с классом .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

В данном методе у элемента <div> добавляется свойство display: flex, а у дочернего margin: auto.

Но данный метод не подойдет, если нужно выровнять текст по левому или правому краю - только по центру:

<div class="list">
	<div><a href="#">Быстрая доставка</a></div>
	<div><a href="#">Скидки клиентам, сезонные акции</a></div>
	<div><a href="#">Большой ассортимент товаров на любой кошелек</a></div>
	<div><a href="#">Гарантия от 1 года</a></div>
</div>
HTML
.list {
	overflow: hidden;
}
.list div {
	display: flex;	
	width: 21%;
	float: left;
	margin: 0 2%;
	height: 90px;
	text-align: center;
	background: #eee;
	line-height: 18px;
}
.list a {
	margin: auto;
}
CSS

Результат:

07.12.2016, обновлено 13.12.2021
5219

Комментарии

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

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

Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
28035
+6
Текст в две колонки
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
33266
+2
Выравнивание блока по центру родителя
Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.
15686
+3
Выравнивание блоков на всю ширину (justify)
Как в горизонтальным меню, метод с justify и after 100% можно использовать для выравнивания других элементов в одну...
6749
0
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
39509
+21
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
27595
+30