Понимание вертикального выравнивания для элементов строчных блоков

Хотя документация предполагает, что вертикальное выравнивание работает для элементов строчных блоков, это может сбить с толку, когда он не может выровняться, как ожидалось. Чтобы внести ясность, давайте углубимся в эту концепцию.

Область применения Vertical-Align

В отличие от text-align, который регулирует выравнивание текста в области содержимого родительского элемента, вертикальное- align работает внутри линейного поля элемента. Строковый блок — это прямоугольная область, охватывающая блоки, созданные встроенным элементом в одной строке.

Пример:

Рассмотрите следующий код:

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

Проблема:
В этом примере установка вертикального выравнивания: middle не центрирует элемент #content внутри элемента по вертикали. #обертка div.
Объяснение:
Vertical-align выравнивает элемент inline-block не относительно его блока-контейнера, а внутри его собственного линейного блока. Поскольку элемент #content содержит только текст, который уже отцентрирован по вертикали на основе базовой линии по умолчанию, это не влияет на окончательное выравнивание.
Вывод:
 
При работе с вертикальным выравниванием для элементов строчных блоков важно понимать, что оно выравнивает содержимое внутри линейного блока элемента, а не содержащего его блока. Имейте это в виду, чтобы добиться желаемого вертикального позиционирования элементов вашей страницы.