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

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

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

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

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

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

v-align-sample

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

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

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

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

Главная страница в wordpress

Октябрь 1, 2015 г.

Вордпресс из коробки выводит на главную страницу ленту последних записей. Как поставить на главную статическую страницу, поменять шаблон главной и некоторые ...

Читать

Программно меняем url alias в Drupal 7

Март 9, 2017 г.

Чтобы программно изменить/задать ЧПУ публикации (или другого объекта) в Drupal, нужно определить три параметра - системный адрес объекта, новый псевдоним и код языка. К примеру, для объекта node код может быть следующим: [crayon-68cba354561ab681778293/] ...

Читать

Когда линтер позволяет себе слишком много

Июнь 29, 2023 г.

Обычно eslint и tslint друг с другом не взаимодействуют, но я попадал в ситуацию, когда правила работают совместно. Далее - как "заткнуть" их обоих ...

Читать

Сделать перенос каждого слова на новую строку CSS

Май 29, 2023 г.

Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS. Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано ...

Читать
 

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

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



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