Поиск

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

Способ выравнять текст по вертикали в блоках фиксированной высотой. Текст обворачивается в тег с классом .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
07.12.2016, обновлено 25.10.2019 1104

Темы

#CSS #HTML

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

Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими...
16.09.2019 157
Пример как сформировать товарную накладную в с помощью класса PHPExcel. Скачать класс можно с официального сайта или...
27.01.2017 6100
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
23.11.2017 10950
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
12.06.2019 3805
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
24.07.2018 6864
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
12.07.2018 2717