Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Вертикальное центрирование является фаворитом дизайнеров — как для печатных, так и для цифровых медиа.
Но выравнивание по вертикали с помощью CSS — не самая простая вещь.
Эта проблема усугубляется в мире, состоящем из нескольких устройств и адаптивного дизайна, поскольку нам необходимо, чтобы наши элементы были гибкими по height
что может сделать расчет их вертикального центра быстрым и сложным.
В этом эпизоде мы узнаем все о:
- Свойство
vertical-align
и как и когда оно работает - Метод вертикального выравнивания элемента с известной
height
- И, наконец, один подход для вертикально центрирующих элементов с переменной
height
.
vertical-align
Свойство vertical-align
влияет только на элементы, для которых установлено display
inline
, inline-block
или table-cell
.
Требуется длина, процент или значение ключевого слова.
Длины и проценты выравнивают baseline
линию элемента на заданном расстоянии выше baseline
его родителя.
Значения ключевых слов могут быть следующими:
-
baseline
-
sub
-
super
-
text-top
-
text-bottom
-
middle
-
top
-
bottom
Большинство из них довольно интуитивно понятны, но sub
выравнивает baseline
с baseline
родительского сценария и super
выравнивает baseline
линию элемента с baseline
линией родительского супер-сценария.
Давайте посмотрим на vertical-align
в практическом примере.
У меня есть сетка изображений и текста здесь, и все они имеют разную высоту, что означает, что текст не все выровнены аккуратно.
<div class="grid"> <img src="http://placebacn.com/200/400"> <h2>grilled bacon</h2> </div> <div class="grid"> <img src="http://placebacn.com/200/300"> <h2>tasty bacon</h2> </div> <div class="grid"> <img src="http://placebacn.com/200/200"> <h2>crispy bacon</h2> </div> <div class="grid"> <img src="http://placebacn.com/200/350"> <h2>bacon</h2> </div>
Мы можем настроить контейнеры сетки для display:inline-block
и использовать vertical-align: bottom
на изображениях, чтобы все выстроилось в ряд.
Если здесь не было текста и мы хотели, чтобы все изображения были центрированы по вертикали, мы могли бы использовать vertical-align: middle
и получить довольно хороший эффект.
Вертикальное центрирование
В « Эпизоде 12: line-height
» мы рассмотрели line-height
и продемонстрировали один из способов имитации вертикального центрирования текста.
Если бы я хотел центрировать целый контейнер из нескольких элементов внутри другого контейнера, нам нужен другой подход.
У меня есть контейнер с темным фоном и рамкой вокруг него. Внутри находится еще одна, меньшая коробка с width
и height
чтобы придать ей форму.
<div class="container"> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt dolores, consequatur dolorem, dignissimos debitis distinctio. Voluptas eligendi fuga voluptatem eos. </div> </div>
Если мы знаем height
этого блока, мы можем использовать абсолютное позиционирование для вертикального и горизонтального центрирования его внутри контейнера.
При position: relative
контейнера коробка может быть размещена абсолютно внутри него. Если мы установим свойства top
и left
на 50%
ящик будет перемещен на 50% от верха и на 50% от левого, оставляя верхний левый угол окна, помещенный в точный центр контейнера.
.container { position: relative; background: #444; } .box { position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; margin: -100px 0 0 -200px; color: #fff; background: #cc3f85; }
С фиксированной width
и height
мы можем установить отрицательные поля на поле; половина height
до вершины и половина width
влево. И теперь коробка находится в центре контейнера.
Этот метод работает хорошо, но недостатком является то, что все ширины фиксированы — это означает, что это не очень хорошее решение при работе над адаптивным проектом.
Жидкость вертикальный центр
Мы можем добиться вертикального центрирования элементов height
жидкости, комбинируя знания о vertical-align:middle
и псевдоэлементы, которые мы рассмотрели в « Эпизоде 16: Псевдоэлементы CSS » .
Мы возьмем тот же самый пример коробки внутри контейнера из ранее, но на этот раз тема будет жидкой.
Хитрость заключается в том, чтобы создать невидимый элемент — с использованием псевдоэлемента — это будет полная height
контейнера и установить для него значение inline-block
и vertical-align:middle
. Затем мы можем вертикально vertical-align: center
внутреннее поле, также сделав его inline-block
и vertical-align: center
. Он может быть центрирован по горизонтали с помощью text-align: center
.
.container { height: 400px; margin: 20px; background: #444; font-size: 0; text-align: center; } .container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .box { display: inline-block; width: 50%; padding: 2em; border: 1px solid #000; background: #cc3f85; font-size: 1rem; vertical-align: middle; }
Теперь, когда контейнерный блок меняет свою width
, процентная width
дочернего блока также изменяется, изменяя его height
но блок остается вертикально центрированным. Довольно мило, а?