CSS Vertical Align: Master the Art of Positioning Your Content Perfectly

CSS свойство vertical-align определяет вертикальное выравнивание элемента относительно линии базы.

Возможные значения свойства vertical-align:

• top - выравнивание верхней границы элемента с верхней линией базы
• middle - выравнивание посередине между верхней и нижней линиями базы
• bottom - выравнивание нижней границы элемента с нижней линией базы
• text-top - выровнять верхнюю часть элемента с верхней линией текста в текущем контексте (обычно это линия базы текущей строки)
• text-bottom - выровнять нижнюю часть элемента с нижней линией текста в текущем контексте (обычно это линия базы текущей строки)

Также можно задавать конкретное значение выравнивания в пикселях или процентах.

Примеры использования свойства vertical-align:

css
.container {
  display: flex;
  align-items: center; /* выровнять по вертикали содержимое контейнера */
}
.button {
  display: inline-block;
  vertical-align: middle; /* выравнивание посередине относительно линии базы */
}
.image {
  vertical-align: middle; /* выравнивание посередине относительно линии базы */
}
.text {
  display: inline-block;
  vertical-align: text-top; /* выровнять верхнюю часть элемента с верхней линией текста */
}

В данном примере свойство vertical-align используется для выравнивания элементов внутри контейнера. В первом примере задается вертикальное выравнивание элементов с помощью свойства align-items у родительского элемента с помощью значений свойства flexbox. В следующих примерах задано конкретное значение vertical-align для отдельных элементов в пикселях (или процентах) или для выравнивания посередине или по верхней части текста.