Используем vertical-align для вертикального выравнивания текста в контейнере

Назначение каскадного стиля vertical-align не так прозрачно и понятно, как бы хотелось. Многие (в том числе и я долгое время) ожидал от него выравнивания содержимого контейнера по высоте. А когда этого эффекта не удавалось получить напрямую, разводил руками — мол, что то тут не работает. :)

Приспособить к требуемой цели vertical-align можно, соблюдая простые правила. Для начала надо понять, что vertical-align относится к прилеганию текста внутри строки, т.е. оперирует с inline-элементами или элементами inline-block. Следовательно, в свойствах внешнего контейнера должна быть задана высота строки (line-height), а выравниваемые блоки должны иметь свойство display: inline-block.

После этого все встаёт на свои места. Вот пример стилей для центровки текста внутри контейнера.

Применяем стили вот к такому HTML коду

В браузере это выглядит так:

v-align-sample

Эффекта центровки мы добились, хотя заметно легкое смещение от центра вниз контейнера. Данный эффект побороть не удалось :).

А вот пара отличных статей по данной тематике:

Разбираемся с vertical-align
Вертикальное выравнивание текста

Мало букафф? Читайте есчо !

100vh не корректно работает для мобильных устройств

Июль 23, 2021 г.

Правильно будет сказать, что свойство не работает так как ожидается. Оказывается, что часть контейнера с установленной высотой 100vh, может быть перекрыта нижней панелью браузера. Разберемся как решается данная проблема. В интернете можно найти ...

Читать

Powered by wordpress plugin, или нет надо мной твоей власти, Завулон

Сентябрь 30, 2015 г.

Люди далекие от программирования, но пожелавшие заиметь свой блог не каком то livejournal или instagram, а так, чтобы он был совсем свой, "типа как сайт", ...

Читать

Ajax в WP

Июль 12, 2017 г.

Посмотрим в данном гайде как сделать обработку ajax запроса на Wordpress. WP предоставляет два hook-а для подключения PHP обработчика к ajax запросу. ...

Читать

Настраиваем патчи в composer на примере drupal проекта

Май 14, 2025 г.

Drupal давно использует composer для управления зависимостями и для загрузки/обновления модулей. Composer кроме всех прочих полезностей позволяет наладить ...

Читать
 

Комментарии к «Используем vertical-align для вертикального выравнивания текста в контейнере»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: