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 но блок остается вертикально центрированным. Довольно мило, а?