Войти
Регистрация

Vertical-align: выравнивание блоков по вертикали в CSS

Выравнивание по вертикали в CSS

В этой статье мы разберем с Вами несколько моментов, касающихся свойства vertical-align.

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

Я же хочу для начинающих объяснить, что это за зверь и как с ним работать.

Мне стало известно, что свойство vertical-align не выравнивает по вертикали содержимое блока, к которому оно применяется, а выравнивает сам блок относительно других блоков внутри родительского.

Это свойство применяется только к строчным элементам сайта - inline или inline-block.

Для выравнивания блока это свойство принимает несколько ключевых значений: top, middle, bottom, baseline и другие. Эти основные.

В итоге, логично подумать, что применив к блоку правило vertical-align:middle наш блок выровняется по середине родительского, но дело в том, что он не изменит своего положения, пока бы в родительский блок не поместить еще блоки.

Напишем разметку:

<div class="block">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

Зададим высоту родительскому блоку в 200px. Дочерним установим высоту и ширину в 50px, фон, а также сделаем их строчными элементами:

.block {
   height:200px;
}
.block div {
   display:inline-block;
   height:50px;
   width:50px;
}
.div1 {
   background:red;
}
.div2 {
   background:blue;
}
.div3 {
   background:green;
}

У нас получится следующее:

1. Значение baseline:

Данное значение выравнивает блоки по базовой линии, за базовую линию будет приниматься нижняя граница самого высокого блока. Т.к. у нас все блоки одинаковые, мы изменений не увидим. Для этого давайте зеленому блоку увеличим высоту до 100px и установим всем блокам vertical-align: baseline;

Результат следующий:

А если красному блоку зададим высоту в 150px, то выравнивание будет по его нижнему краю, т.к. он выше всех:

2. Значение middle:

Если мы красному блоку зададим vertical-align: middle, то он выровняется по базовой линии остальных элементов, а именно по их нижней границе:

но если мы синий или зеленый блок увеличим в высоте, то базовая линия будет по нижней границе большего блока ти наш красный блок выровняется по базовой линии самого высокого, а именно зеленого:

3. Значение top:

Данное значение выравнивает верхнюю границу элемента по верхней границе самого высокого элемента.

Результат работы этого значения виден в предыдущем примере, где я синему блоку установил vertical-align:top, без него получилось бы вот так:

4. Значение bottom:

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

На самом деле, чтобы понять как работает это свойство необходимо тестировать разные значения с разными размерами блоков.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?