Вертикальное выравнивание с помощью свойства вертикального выравнивания

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

Определение вертикального выравнивания

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

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

Выбор элемента для выравнивания

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

внутри

, свойствовертикальное выравнивание должно быть применено непосредственно к

.

Практический пример

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

HTML:

CSS:
#outer {
  height: 200px;
  text-align: center;
}

#inner {
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}

#header {
  display: inline-block;
}
Интуитивно можно было бы ожидать, что элемент 
 будет центрирован по вертикали внутри элементов 
. Однако это не так. Чтобы понять почему, важно помнить, что вертикальное выравнивание происходит построчно внутри родительского элемента. Следовательно, если содержимое элемента 
 превышает одну строку, 
 не будет выровнено должным образом.
Чтобы проиллюстрировать эту концепцию, мы можем изменить HTML-код:
Как видите, элемент 
 теперь центрирован по вертикали внутри родительского элемента, поскольку вертикальное выравнивание основано на высоте строки текста.