Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для vertical-align по vertical-align здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили краткие советы о том, как вертикально центрировать текст и значки.
V для вертикально центрирования текста и значков
В оригинальном скринкасте для свойства vertical-align мы рассмотрели несколько методов центрирования элементов по вертикали. В этой статье мы опишем три различных метода вертикального центрирования — то, что всегда было довольно хитрым, но теперь это просто.
Используйте line-height для простого вертикального центрирования
Для вертикального центрирования отдельной строки текста или значка внутри его контейнера мы можем использовать свойство line-height . Это свойство контролирует height строки в серии текста и добавляет одинаковое количество пространства над и под линейным блоком встроенных элементов. Если height контейнера известна, то установка line-height того же значения будет вертикально центрировать дочерние элементы.
.container { width: 200px; height: 200px; line-height: 200px; }
Используйте position и transform для гибкого вертикального центрирования
Вышеуказанный метод line-height быстрый и грязный, но опирается на фиксированную высоту. Я стараюсь не задавать height явно, поскольку это часто может ограничивать поток контента в адаптивном проекте. Этот метод недостаточно гибок, если вы работаете с элементами переменной или height жидкости.
Вместо этого мы можем комбинировать position и сдвиг в вертикальные центральные элементы переменной height . Например, для вертикального центрирования элемента на всю height области просмотра мы могли бы использовать следующий фрагмент:
.container { position: relative; min-height: 100vh; } .vertical-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
Сначала мы создаем контекст позиционирования путем установки position:relative элемента контейнера. Это позволит нам расположить элемент .vertical-center пределах его границ.
Затем мы помещаем top left угол элемента, который должен быть центрирован по точному центру контейнера, располагая его top край на 50% от top его родителя и на 50% от left от его родителя.
Наконец, элемент смещается обратно в центр, переводя его на 50% от его height и left на 50% его width . Наш элемент теперь вертикально и горизонтально центрирован внутри контейнера. Поскольку размещение выполняется с процентными значениями, которые относятся к размеру элемента, если width или height контейнера или дочернего элемента изменится, элемент останется центрированным.
Используйте flexbox для вертикального центрирования
Приведенный выше метод отлично подходит для центрирования элементов с использованием традиционной блочной модели и методов позиционирования. Он будет работать в IE9 +, но если вам нужно только поддерживать современные браузеры или IE10 +, вы можете достичь того же результата с гораздо меньшим количеством кода, используя flexbox .
Flexbox — это совершенно другой способ мышления о макете, но одной из его сильных сторон является то, как он может выравнивать элементы в горизонтальном и вертикальном пространстве.
Для центрирования элемента с помощью flexbox мы можем использовать следующий фрагмент:
.container { display: flex; justify-content: center; align-items: center; }
Этот компактный фрагмент превращает наш .container в гибкий контейнер, который автоматически превращает его дочерние элементы в гибкие элементы. Эти гибкие элементы можно затем центрировать по горизонтали с помощью justify-content и по вертикали с помощью align-items .