Как выровнять по центру Div с помощью CSS Grid?
В этой статье мы рассмотрим четыре способа центрирования div по горизонтали и вертикали с помощью CSS Grid. Конечно, эти методы центрирования можно использовать для любого элемента.
Давайте сначала создадим контейнер с простым элементом box внутри, который мы будем использовать для демонстрации этих методов центрирования. Вот HTML:
Во всех наших примерах мы будем использовать это display: gridсвойство. Это устанавливает <article> элемент как контейнер сетки и создает сетку на уровне блоков для этого контейнера.
Теперь давайте рассмотрим различные способы центрирования нашего блока div.1. Отцентрируйте Div с помощью CSS Grid и поместите себя
Мой любимый способ центрировать элемент с помощью Grid — использовать place-self свойство.
Центрировать наш div очень просто:
article {
display: grid;
}
div {
place-self: center;
}Свойство place-selfявляется сокращением для свойств (по align-selfвертикали) и justify-self(по горизонтали) (которые полезны, если вы просто центрируете по одной оси).
Использование place-selfнастолько просто, что это очевидное решение. Но это не единственный способ центрировать элемент с помощью сетки, поэтому давайте теперь рассмотрим некоторые другие методы.
Преимущество использования place-selfзаключается в том, что оно применяется к центрируемому элементу, а это означает, что вы также можете использовать его для центрирования других элементов в том же контейнере. (Попробуйте добавить больше элементов div в демо-версию CodePen и посмотрите, что получится.)
2. Центрируйте Div с помощью CSS Grid, выравнивания содержимого и выравнивания элементов
Свойство justify-contentиспользуется для выравнивания элементов контейнера по горизонтали, когда элементы не используют все доступное пространство. Есть много способов установить это justify-contentсвойство, но здесь мы просто установим его в center.
Как и justify-contentсвойство, align-itemsсвойство используется для выравнивания содержимого в контейнере, но оно выравнивает содержимое по вертикали, а не по горизонтали.
Вернемся к нашему тестовому HTML и добавим в родительский контейнер следующий код:
article {
display: grid;
justify-content: center;
align-items: center;
}Очевидным преимуществом этого метода является то, что он требует меньше кода, поскольку центрирование обрабатывается контейнером. Но в некотором смысле нацеливание на div через его контейнер также является недостатком, поскольку это также повлияет на любой другой элемент в контейнере.
3. Центрируйте Div с помощью CSS Grid и Auto Margins
Как всегда, мы нацелимся на родительский контейнер с помощью display: grid. Мы также назначим блоку div автоматическое поле, используя margin: auto. Это заставляет браузер автоматически вычислять доступное пространство вокруг дочернего элемента div и делить его по вертикали и горизонтали, размещая элемент div посередине:
article {
display: grid;
}
div {
margin: auto;
}4.
Центрируйте Div с помощью CSS Grid и элементов размещенияСвойство place-itemsиспользуется для выравнивания элементов по вертикали и горизонтали в сетке. Его можно использовать для центрирования нашего div, ориентируясь на контейнер следующим образом:
article {
display: grid;
place-items: center;
}Как и place-selfсвойство, place-itemsэто сокращение для двух свойств, в данном случае justify-items(горизонтальное) и align-items(вертикальное).
В отличие от place-self, place-itemsприменяется к контейнеру, что придает ему немного меньшую гибкость.
Каждый из этих методов позволяет центрировать div по горизонтали и вертикали внутри контейнера. Как я уже сказал, я предпочитаю place-selfметод, главным образом потому, что он применяется к центрируемому элементу, а не к контейнеру. То же самое и для margin: autoметода. Но, конечно, если вы хотите центрировать элемент только в одном направлении, вы также можете использовать либо, align-selfлибо justify-self.
В демонстрационных примерах мы только что использовали пустой div, но, конечно, вы можете добавить содержимое в div, и центрирование по-прежнему будет работать. И, опять же, эти методы центрирования работают с элементами, отличными от div.
text-align | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры
Определяет горизонтальное выравнивание текста в пределах элемента.
| Значение по умолчанию | left |
|---|---|
| Наследуется | Да |
| Применяется | К блочным контейнерам |
| Анимируется | Нет |
Синтаксис
text-align: center | justify | left | right | start | end
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- center
- Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
- justify
- Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краям. Чтобы произвести это действие, браузер в этом случае добавляет пробелы между словами.
- left
- Выравнивание текста по левому краю.
- right
- Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остаётся aquo;рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объёмом не более трёх строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
- start
- Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
- end
- Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
left center right justify start end
div {
text-align: {{ playgroundValue }};
}Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-align</title> <style> div { border: 1px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ margin-bottom: 5px; /* Отступ снизу */ } #left { text-align: left; } #right { text-align: right; } #center { text-align: center; } .content { width: 75%; /* Ширина слоя */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div><div>Выравнивание по левому краю</div></div> <div><div>Выравнивание по центру</div></div> <div><div>Выравнивание по правому краю</div></div> </body> </html>
1.Рис. 1. Выравнивание текста
Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).
Рис. 2. Выравнивание текста в браузере Internet Explorer 7
Объектная модель
Объект.style.textAlign
Примечание
IE до версии 7 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Text Module Level 3 | Рабочий проект |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| left, right, center, justify | 3 | 8 | 12 | 1 | 3.5 | 1 | 1 |
| start, end | 79 | 1 | 15 | 3.1 | 2 | ||
| left, right, center, justify | 1. 5 | 1 | 4 | 1 |
| start, end | 80 | 68 | 46 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Текст и шрифт
См. также
- text-align-last
- Свойства текста в CSS
Рецепты
- Как выровнять заголовок таблицы по левому краю?
- Как выровнять текст по центру?
- Как выровнять текст по ширине?
Практика
- Выравнивание заголовка таблицы
- Горизонтальное выравнивание в ячейках
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 25.
04.2020
Редакторы: Влад Мержевич
Как прикрепить элемент к центру его родителя
Центрирование элементов в CSS иногда может показаться невозможным. Особенно, если центрируемый дочерний элемент имеет динамическую ширину или высоту или на самом деле больше, чем его родительский элемент.
Прикрепление дочернего элемента к центру его родителя имеет множество применений. При построении костей зомби в моей игре мне нужен был способ, чтобы контейнер (родительский элемент) занимал определенную высоту и ширину независимо от размера его содержимого, а холст анимации (дочерний элемент) был идеально центрирован, даже если он крупнее своего родителя. Это позволяет зомби в моей игре занимать предсказуемое пространство, но позволяет их анимациям выходить за пределы заданного пространства без обрезки.
К счастью для нас, это на самом деле довольно просто с небольшой магией flexbox!
Для родительского элемента все, что нам нужно сделать, это:
- установить родительский элемент-контейнер для использования flexbox
- центрировать дочерние элементы по горизонтали с помощью
justify-content - центрировать дочерние элементы по вертикали с помощью
align-items
.
родительский-контейнер {
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
}
Одна важная вещь, которую нельзя пропустить в дочернем элементе, это скажи ему не уменьшаться . В противном случае дочерний элемент будет сжиматься до ширины своего родителя вместо того, чтобы оставаться на полную ширину, как мы хотим.
.child-canvas {
гибкая усадка: 0;
}
Вот пример, с которым вы можете поиграть:
.parent{
ширина: 200 пикселей;
высота: 300 пикселей;
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
граница: 5px пунктирная #6BD9ED;
}
.ребенок{
ширина: 300 пикселей;
высота: 400 пикселей;
гибкая усадка: 0;
граница: 5px пунктирная #A7E040;
} Когда у вас есть эта настройка, вы можете легко изменить положение дочернего элемента. Например, если вы предпочитаете, чтобы вы могли закрепить его в верхней части родителя:
.
parent{
ширина: 200 пикселей;
высота: 300 пикселей;
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: flex-start;
граница: 5px пунктирная #6BD9ED;
}
.ребенок{
ширина: 300 пикселей;
высота: 400 пикселей;
гибкая усадка: 0;
граница: 5px пунктирная #A7E040;
} Или закрепить внизу слева:
.parent{
ширина: 200 пикселей;
высота: 300 пикселей;
дисплей: гибкий;
выравнивание содержимого: flex-start;
элементы выравнивания: flex-end;
граница: 5px пунктирная #6BD9ЭД;
}
.ребенок{
ширина: 300 пикселей;
высота: 400 пикселей;
гибкая усадка: 0;
граница: 5px пунктирная #A7E040;
} Даже после того, как вы закрепите его, вы можете внести небольшие изменения, используя относительное позиционирование дочернего элемента, чтобы получить его именно там, где вы хотите:
.parent{
ширина: 200 пикселей;
высота: 300 пикселей;
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
граница: 5px пунктирная #6BD9ED;
}
. ребенок{
ширина: 300 пикселей;
высота: 400 пикселей;
гибкая усадка: 0;
граница: 5px пунктирная #A7E040;
положение: родственник;
справа: -15px
} 
ребенок{
ширина: 300 пикселей;
высота: 400 пикселей;
гибкая усадка: 0;
граница: 5px пунктирная #A7E040;
положение: родственник;
справа: -15px
} Теперь, когда вы знаете, как прикреплять элементы к их родителям, вы можете легко центрировать макеты. Flexbox очень мощен для этого и многих других потребностей пользовательского интерфейса. Flexbox Zombies раскрывает все это в мельчайших (кровавых?) деталях!
Вот ваше домашнее задание: поиграйте с приведенными выше примерами codepen и найдите способ использовать это, чтобы упростить один из ваших существующих приемов центрирования.
CSS-сетка — кратчайший путь к центрированию элементов
Сегодня я писал в Твиттере о новом свойстве CSS0 I1: 90-90 обнаружено место I4: 90 элементов. Это простое сокращение для – по крайней мере я так думал . align-items и justify-content 
Оказывается, элементов размещения — это сокращение для элементов выравнивания и элементов выравнивания (спасибо Бенджамину за указание на это).
Поначалу это открытие меня огорчило, потому что это означало, что я не мог избавиться от одного объявления CSS в своих классах на основе flexbox для центрирования элементов.
/* этот класс центрирует элементы с помощью flexbox
и останется ли здесь */
.центр {
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: по центру;
}
Поделившись своим разочарованием, Бенджамин упомянул кое-что, о чем я раньше не подумал. мест-элементов отлично работает с display: grid .
Как центрировать элементы с помощью сетки CSS
Должен признать, что даже когда CSS сетка в настоящее время поддерживается в разных браузерах, я еще мало ей пользовался. Оказывается, вы можете использовать display: grid для центрирования элементов так же быстро, как и при использовании flexbox.
Определите display: grid на элементе (см. этот CodePen в качестве примера), соедините grid-declaration с align-items и justify-items , и все готово! Вы только что центрировали дочерний элемент этого элемента.
<тело>
привет из центрального диапазона
.center-using-grid {
отображение: сетка;
выравнивание элементов: по центру;
элементы выравнивания: центр;
}
align-items и justify-items определяют свойства align-self и justify-self для всех дочерних элементов прямой сетки. Взгляните на таблицу ниже, чтобы узнать об этих свойствах CSS.
Хорошая вещь в этом подходе; вы можете объединить элементов выравнивания и элементов выравнивания в одно объявление — элементов места .
.center-using-grid-even-shorter {
отображение: сетка;
место-предметы: центр;
}
Для центрирования элементов с помощью CSS grid требуется только два объявления CSS.