vertical-align

Свойство vertical-align выравнивает текстовые элементы по вертикали относительно друг друга.

🤖 Для простого текста это не особо актуально, то вот для строчно-блочных (inline-block) элементов это свойство может быть очень полезным.

Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical-align они будут разной высоты:

        
          
          <div class="parent">  <div class="element small"></div>  <div class="element medium"></div>  <div class="element big"></div></div>
          <div class="parent">
  <div class="element small"></div>
  <div class="element medium"></div>
  <div class="element big"></div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .element {  display: inline-block;  width: 50px;  height: 50px;  background-color: white;}.medium {  height: 100px;}.big {  height: 150px;}
          .element {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: white;
}

.medium {
  height: 100px;
}

.big {
  height: 150px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
          
          .element {  vertical-align: top;}
          .element {
  vertical-align: top;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.

Значение свойства vertical-align чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.

Рассмотрим доступные значения на примере с котиком 😍:

• baseline — значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.

• top — верхняя граница элемента находится на уровне верхней границы строки.

• middle — мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.

• bottom — выравнивает нижнюю границу элемента по уровню нижней границы строки.

• sub — удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:

• super — работает почти как sub, только поднимает базовую линию вверх.

• text-bottom — выравнивает элемент по нижней точке текста с учётом выносных элементов.

  

• text-top — верхняя часть элемента выравнивается по верхнему краю родителя:

  

Помимо ключевых слов можно использовать числовые значения.

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

Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline. Процент рассчитывается от line-height родительского элемента.

💡 Свойство vertical-align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.

💡 На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально 😉

💡 Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

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

🛠 С появлением флексбоксов выравнивание по вертикали производится при помощи align-items. Поэтому на свойство vertical-align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.

+ Развернуть