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

07.12.2016

5219

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

Метод 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

CSS Flexbox

В данном методе у элемента <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