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

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

Комментарии

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

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

Перечёркнутый текст
Первыми тегами для зачёркнутого текста были strike и s. C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили.
7028
-1
jQuery UI Sortable - перетаскивание элементов
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
18261
+6
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
24983
+7
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
5377
+1
Создание товарной накладной в PHPExcel
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
9311
+3
Как отключить тег br
Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими способами.
908
0