6 приемов CSS для выравнивания содержимого по вертикали
Автор Agus in Coding. Обновлено .
Давайте поговорим о вертикальном выравнивании в CSS, а точнее о том, как это невозможно. CSS еще не предоставил официального способа центрировать содержимое по вертикали внутри своего контейнера. Это проблема, которая, вероятно, расстроила веб-разработчиков во всем мире. Но не бойтесь, в этом посте мы покажем вам несколько трюков, которые помогут вам имитировать эффект 9.0008 .
Однако у этих трюков могут быть ограничения, и вам, возможно, придется использовать более одного трюка, чтобы создать иллюзию. Если вы знаете какой-либо другой трюк, сообщите нам об этом в комментариях.
Рекомендуемое чтение: Как получить равную высоту столбцов с помощью CSS
1. Использование абсолютного позиционирования
Первый трюк, который мы здесь рассмотрим, использует свойство position .
У вас есть два <div> , один — контейнер, другой — дочерний элемент, содержащий содержимое.
Сначала мы установим относительную позицию элемента-контейнера, затем установим позицию дочернего элемента на абсолютную . Это позволяет нам свободно размещать его поперек контейнера.
Чтобы выровнять его по вертикали, переместите положение дочернего элемента сверху на половину высоты контейнера и подтяните его вверх на половину ширины дочернего элемента. Вот результат:
Этот трюк идеален, когда есть только один дочерний элемент, иначе абсолютный 9Позиция 0022 повлияет на другой элемент в том же контейнере.
2. Используйте преобразование CSS3
Преобразование CSS3 упрощает размещение содержимого в центре. Преобразование CSS3, в отличие от свойства position , не повлияет на положение других элементов в том же контейнере.
Предположим, что у нас та же структура HTML, что и в предыдущем методе — один родительский элемент, один дочерний элемент — 50% сверху и использование преобразования CSS дает перевод -50% .
И вот оно.
Имейте в виду, что преобразования CSS3 не будут работать в Internet Explorer 8 и более ранних версиях. Возможно, вы захотите использовать любой из других методов в качестве запасного варианта.
3. Используйте отступы
Мы также можем использовать отступы , чтобы создать иллюзию вертикального выравнивания. Для этого просто установите верхний и нижний отступы одинаково, как показано ниже:
Этот трюк подходит, когда вы не устанавливаете фиксированную ширину контейнера, а просто устанавливаете ширину на авто .
4. Использовать высоту строки
Если у вас есть только одна строка текстового содержимого внутри контейнера, вы можете выровнять текст по вертикали, используя свойство line-height . Установите значение line-height примерно таким же, как высота контейнера, и вы увидите следующий вывод.
Помните, что этот трюк работает только с одной строкой текста. Если содержимое разбивается на две или более строк, расстояние между каждой строкой будет таким, как мы указали в line-height , что дает нам слишком много пробелов.
5. Использование таблицы CSS
Лично мне больше всего нравится использовать таблицу CSS для применения вертикального выравнивания. Он работает в старых браузерах, таких как Internet Explorer 8. Этот метод выполняется путем установки отображения элемента контейнера на table , в то время как дочерний элемент должен отображаться как table-cell , а затем использовать свойство vertical-align по центру текст вертикально.
6. Используйте Flexbox
Последний способ вертикального центрирования — использование Flexbox. Flexbox — это новый модуль в CSS3. Он предлагает более простой метод выравнивания контента. Чтобы центрировать содержимое по вертикали в flex box, просто добавьте
Имейте в виду, что некоторые браузеры Flexbox поддерживают только частичную функцию модуля Flexbox, например Internet Explorer 10, Safari, 6 и Chrome 27 и ниже. Следовательно, как и в случае с CSS3 Transform, убедитесь, что эффект хорошо работает в этом браузере.