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 стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.

+ Развернуть