place-items
Задаёт `align-items` и `justify-items` сразу.
Синтаксис
place-items: align justify;Значения
| Параметр | Тип | Описание |
|---|---|---|
| center | keyword | Одно значение для обоих направлений. |
| align justify | keyword | Два значения: по вертикали, затем по горизонтали. |
Примеры
Самый короткий способ поставить что-то по центру:
<div style="display: grid; place-items: center; height: 120px; background: honeydew;">
Centered with one line
</div>Примечания
display: grid; place-items: center центрирует содержимое в обе стороны. Во flexbox justify-items нет, поэтому там берите justify-content и align-items.
См. также
- align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
- justify-items — Выравнивает элементы сетки по горизонтали внутри их ячеек.
- align-content — Распределяет строки многострочного flex-контейнера или ряды сетки вдоль поперечной оси.
Вопросы и ответы по теме
В учебнике
- Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.