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

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

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

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

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

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

v-align-sample

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

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

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

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

Авторизация по емайл (email) в CMS Drupal

Май 6, 2010 г.

Сейчас куда ни глянь, пошла мода в качестве имени при авторизации использовать не пресловутый login, а адрес электронной почты. И это действительно удобно. Адрес почты уникален для каждого пользователя, хорошо запоминается самим пользователем и не возникает ...

Читать

Программный рендер меню в Drupal 9

Сентябрь 8, 2021 г.

Продолжаю публиковать сниппеты кода для drupal 9, на этот раз несколько полезных вещей, связанных с рендерингом меню. Рендер меню по известному id меню Вы знаете идентификатор, вам нужен рендер: [crayon-687c4fdaacf83393375256/] Рендер ...

Читать

Задача о поиске всех подходящих под-сум

Июль 1, 2023 г.

№560 leetcode Subarray Sum Equals K. Есть массив чисел, и дано значение k. Надо найти все последовательные под-массивы сумма которых равна k. В условиях также сказано, что числа в массиве могут быть как положительные, так и отрицательные. Если ...

Читать

Строгая маршрутизация в Drupal 6,7

Июль 13, 2016 г.

Что уж там говорить, Drupal грешит нестрогой машрутизацией. К примеру, вы создаёте маршрут /mypage, то Drupal направит к обработчику все запросы вида /mypage/subpage и /mypage/subpage/subpage2 и т.д. Вы можете обратиться, к примеру, к публикации ...

Читать
 

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

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



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