V-правила

V-правила в CSS — это принципы вертикального позиционирования элементов и управления их расположением в потоке документа.

Основные типы правил

  • vertical-align — выравнивание по вертикали для inline и inline-block элементов.
  • line-height — задает высоту строки и влияет на вертикальное выравнивание текста.
  • Использование flexbox для вертикального центрирования: align-items и justify-content.

Пример вертикального центрирования

div.container {
  display: flex;
  align-items: center;  /* по вертикали */
  justify-content: center; /* по горизонтали */
  height: 200px;
  background: lightgray;
}

div.box {
  padding: 20px;
  background: coral;
}

В этом примере блок div.box будет идеально центрирован по обеим осям внутри контейнера.

Особенности

  • Для inline элементов вертикальное выравнивание задается через vertical-align.
  • Flexbox позволяет легко управлять вертикальным расположением блоков.
  • Line-height особенно полезен для выравнивания текста внутри элементов.