6 хитростей CSS для выравнивания контента по вертикали

Давайте поговорим о вертикальном выравнивании в CSS или, если быть более точным, о том, как это невозможно. CSS еще не предоставил официальный способ центрировать контент по вертикали в своем контейнере. Это проблема, которая, вероятно, расстроила веб-разработчиков повсюду. Но не бойтесь, в этом посте мы расскажем вам о нескольких хитростях, которые помогут вам подражать эффекту.

Однако эти приемы могут иметь ограничения, и вам может понадобиться использовать несколько приемов, чтобы завершить иллюзию. Если вам известен какой-либо другой трюк, сообщите нам об этом в комментариях.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

1. Используйте абсолютное позиционирование

Первый трюк, который мы здесь увидим, использует свойство position. У вас есть два

<

div>один – контейнер, другой – дочерний элемент, содержащий содержимое.

Сначала мы установим относительное положение элемента контейнера, а затем установим абсолютное положение дочернего элемента. Это позволяет нам свободно размещать его через контейнер.

Чтобы выровнять его по вертикали, переместите положение дочернего элемента сверху на половину высоты контейнера и вытяните его на половину ширины дочернего элемента. Вот вывод:

Этот прием идеален, когда имеется только один дочерний элемент, иначе абсолютная позиция повлияет на другой элемент в том же контейнере.

2. Используйте CSS3 Transform

CSS3 Transform позволяет легко размещать контент в центре. CSS3 Transform, в отличие от свойства position, не повлияет на положение других элементов в том же контейнере.

Предполагая, что у нас та же структура HTML, что и в предыдущем методе – один родительский, один дочерний элемент – 50% сверху, а использование CSS-преобразования дает перевод -50%. И там у вас есть это.

Имейте в виду, что CSS3 Transforms не будет работать в Internet Explorer 8 и ниже. Вы можете использовать любой из других методов здесь в качестве запасного варианта.

3. Используйте Padding

Мы также можем использовать отступы, чтобы создать иллюзию вертикального выравнивания. Для этого просто установите верхний и нижний отступы одинаково, как показано ниже:

Этот прием подходит для случаев, когда вы не устанавливаете контейнер на фиксированную ширину, просто установите ширину на auto.

4. Используйте высоту строки

Если у вас есть только одна строка текстового содержимого в контейнере, вы можете выровнять текст по вертикали, используя свойство line-height. Установите значение line-height примерно таким же, как высота контейнера, и вы увидите следующий результат.

Помните, что этот трюк работает только с одной строкой текста. Если содержимое разбивается на две или более строки, пространство между каждой строкой будет таким, как мы указали в высоте строки, что дает нам слишком много пустого пространства.

5. Используйте таблицу CSS

Лично использование CSS Table – мой любимый трюк для применения вертикального выравнивания. Он работает в старых браузерах, таких как Internet Explorer 8. Этот метод выполняется путем установки отображения элемента контейнера в таблицу, в то время как дочерний элемент должен отображаться как ячейка таблицы, а затем использовать свойство вертикального выравнивания для центрирования текста по вертикали.

6. Используйте Flexbox

Последний метод вертикального центрирования – использование Flexbox. Flexbox – это новый модуль в CSS3. Он предлагает более простой метод выравнивания контента. Чтобы центрировать содержимое по вертикали во флекс-боксе, просто добавьте align-items: center; следующим образом, и это все.

Имейте в виду, что некоторые браузеры Flexbox поддерживают только функцию частичных функций модуля Flexbox, например Internet Explorer 10, Safari 6 и Chrome 27 и ниже. Следовательно, как и в случае с CSS3 Transform, убедитесь, что эффект хорошо подходит для этих браузеров.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *