5 различных способов вертикального выравнивания содержимого CSS | Хосе Гранха
Обзор различных подходов CSS к дизайну ваших веб-страниц Эль на Unsplash.
Выравнивание по вертикали всегда было одной из тех ежедневных проблем, с которыми приходилось сталкиваться. Раньше это была постоянная головная боль для разработчиков. К счастью, с новыми макетами, такими как Flex и Grid, это стало тривиальной задачей. Тем не менее, всегда полезно знать варианты решения проблемы.
Давайте рассмотрим все имеющиеся у нас инструменты для вертикального выравнивания. Хотя некоторые из них не самые полезные, их изучение может улучшить ваше понимание CSS.
Не так давно макет таблицы был одним из самых популярных макетов, используемых в HTML. Используя свойство Вот список значений, связанных с таблицей Давайте закодируем наше первое решение, используя приведенные выше значения: Для вертикального выравнивания мы используем свойство «Свойство вертикального выравнивания можно использовать в двух контекстах: — для вертикального выравнивания блока встроенного элемента внутри содержащего его блока строки. Например, его можно использовать для вертикального размещения — для вертикального выравнивания содержимого ячейки в таблице». — MDN Web Docs Обратите внимание, что В нашем примере самый важный фрагмент кода: Использование вышеописанного в основном такое же, как создание макетной таблицы: Посмотрим на результат: Давайте проверим результат, чтобы лучше понять, что происходит: Обратите внимание, что таблицы HTML следует использовать для табличных данных. Абсолютное позиционирование было популярным решением на протяжении многих лет. Это все еще полезно в некоторых конкретных сложных сценариях. Техника проста: Давайте используем это в примере: Как и раньше, давайте посмотрим на важную логику CSS из приведенного выше кода: Давайте проверим результат: Результат очень похож на предыдущий: Flexbox был вдохновлен популярными платформами пользовательского интерфейса, такими как Bootstrap. Его первый рабочий вариант был опубликован 23 июля 2009 года. Одиннадцать лет спустя удивительно видеть, что его поддержка резко возросла: его использование поддерживается примерно в 99,2% браузеров. FlexBox оснащен функциями выравнивания содержимого. Давайте рассмотрим два наиболее подходящих для нашего варианта использования: «Свойство CSS «Свойство CSS Мы можем объединить оба, чтобы выровнять наш элемент по центру контейнера Давайте проверим результат: Здесь мы видим более чистый и естественный подход. Grid был разработан командой Microsoft и добавлен в Internet Explorer 10 в 2011 году. Как и Flex, он полнофункциональный и упакован с точки зрения выравнивания. Мы можем использовать Давайте посмотрим на определение: «CSS Этот подход не так популярен, как подход Flexbox, поскольку браузеры меньше поддерживают Grid. Если вы хотите центрировать элемент, использование сетки может быть излишним. Код очень похож на Flex. Используя свойство Как упоминалось ранее, приведенный ниже код эквивалентен коду выше: Давайте проверим результат: Конечный результат очень похож на Flexbox. Выравнивание с полем Очень простой, но эффективный метод. Однако Однако Grid и Flexbox теперь поддерживают Давайте посмотрим на пример: Здесь происходит вся магия: Давайте проверим результат: Этот результат очень похож на предыдущие. display , вы можете заставить некоторые не- элементы вести себя как они.
display : vertical-align таблицы CSS.
в строке текста.
вертикальное выравнивание ведет себя по-разному на блоке и элементах таблицы . Вот почему, если вы попытаетесь использовать его для центрирования элементов на div , это ничего не даст.
Это их единственная цель. Многие люди злоупотребляют ими.: относительно относительно контейнера, с которым вы хотите центрировать его.: абсолютное для элемента, который вы хотите центрировать.: 50% , чтобы переместить элемент примерно в середину экрана. transateY(-50%) , чтобы окончательно отрегулировать элемент по центру. center me div занимает все горизонтальное пространство и отделен от контейнера.
Свойство: align-items
align-items устанавливает align-self значение для всех прямых потомков как группы. Во Flexbox он управляет выравниванием элементов по поперечной оси. В Grid Layout он управляет выравниванием элементов на оси блоков в пределах их области сетки». — MDN Web Docs Свойство: justify-content
justify-content определяет, как браузер распределяет пространство между элементами содержимого и вокруг них вдоль главной оси flex-контейнера и встроенного ось грид-контейнера».
— Веб-документы MDN Flexbox . Это, безусловно, самый распространенный подход, используемый в настоящее время. Это просто, эффективно и просто требует CSS в одном из элементов. center me div просто занимает место, которое ему нужно, так как мы используем свойства выравнивания. Это потому, что Flexbox был создан с учетом такого варианта использования. Мы можем ожидать более приятные элементы, такие как align-items и justify-content , как мы это делали во Flex.
Однако у Grid есть сокращенное свойство для настройки обоих: элементов места . 9Сокращенное свойство 0107 place-items позволяет одновременно выравнивать элементы как по блочному, так и по внутреннему направлению (т. е. свойства align-items и justify-items ) в соответствующей системе компоновки, такой как Grid или Flexbox. Если второе значение не задано, для него также используется первое значение». — MDN Web Docs place-items , код для достижения этого поведения очень минимален: .container-center {
display: grid;
мест-элементов: центр;
} .
container-center {
display: grid;
элементов выравнивания: по центру;
выравнивание содержимого: по центру;
} x , в результате чего элемент выравнивается по горизонтали. margin: auto не работало для вертикального центрирования на display: block elements. margin: auto для центрирования элемента как по вертикали, так и по горизонтали.