6 хитростей CSS для выравнивания контента по вертикали
Давайте поговорим о вертикальном выравнивании в CSS или, если быть более точным, о том, как это невозможно. CSS еще не предоставил официальный способ центрировать контент по вертикали в своем контейнере. Это проблема, которая, вероятно, расстроила веб-разработчиков повсюду. Но не бояться, в этом посте мы расскажем вам несколько хитростей, которые могут вам помочь подражать эффекту.
Эти приемы могут иметь ограничения, и вам, возможно, придется использовать более одного трюка чтобы завершить иллюзию. Если вам известен какой-либо другой трюк, сообщите нам об этом в комментариях.
1. Используйте абсолютное позиционирование
Первый трюк, который мы здесь увидим, использует Сначала мы установим относительную позицию элемента контейнера, затем установим позицию дочернего элемента Чтобы выровнять его по вертикали, переместите положение дочернего элемента сверху на половину высоты контейнера и вытяните его на половину ширины дочернего элемента. Вот вывод: Этот трюк идеален, когда есть только один дочерний элемент, в противном случае CSS3 Transform упростил размещение контента в центре. CSS3 Transform, в отличие от Предполагая, что у нас та же структура HTML, что и у предыдущего метода - один родительский, один дочерний элемент - Имейте в виду, что CSS3 Transforms не будет работать в Internet Explorer 8 и ниже. Вы можете использовать любой из других методов здесь в качестве запасного. Мы также можем использовать Этот прием подходит для случаев, когда вы не устанавливаете контейнер на фиксированную ширину, просто установите ширину в Если у вас есть только одна строка текстового содержимого в контейнере, вы можете выровнять текст по вертикали, используя Помните, что этот трюк работает только с одной строкой текста. Если содержимое разбивается на две или более строки, пространство между каждой строкой будет таким, как мы указали в Лично использование CSS Table - мой любимый трюк для применения вертикального выравнивания. Он работает в старых браузерах, таких как Internet Explorer 8. Этот метод выполняется путем установки отображения элемента контейнера в Последний метод вертикального центрирования - использование Flexbox. Flexbox - это новый модуль в CSS3. Он предлагает более простой метод выравнивания контента. Чтобы центрировать содержимое по вертикали во флекс-боксе, просто добавьте Имейте в виду, что некоторые браузеры Flexbox поддерживают только функцию частичных функций модуля Flexbox, например Internet Explorer 10, Safari 6 и Chrome 27 и ниже. Следовательно, аналогично трюку с CSS3 Transform, убедитесь, что эффект хорошо падает в этих браузерах.позиция имущество. У вас есть два абсолютный. Это позволяет нам свободно размещать его через контейнер. абсолютный позиция будет влиять на другой элемент в том же контейнере.2. Используйте CSS3 Transform
позиция свойство, не повлияет на положение других элементов в том же контейнере.50% сверху и с помощью CSS-преобразования дает перевод -50%. И вот оно.3. Используйте Padding
набивка создать иллюзию вертикального выравнивания. Для этого просто установите верхний и нижний отступы одинаково, как показано ниже:авто.4. Используйте высоту строки
высота линии имущество. Установить высота линии значение примерно столько же, сколько высота контейнера, и вы увидите следующий вывод.высота линии, давая нам слишком много пробелов.5. Используйте таблицу CSS
Таблица, в то время как дочерний элемент должен отображаться как Стол-элементная затем используйте вертикальные выравнивания свойство центрировать текст по вертикали.6. Используйте Flexbox
align-items: center; следующим образом, и это все.
