Отцентрируйте выравнивания для всех элементов гибкого элемента <div>:
div
{
display: flex;
align-items: center;
}
Попробуйте сами »
Определение align-items
CSS свойство align-items определяет выравнивание по умолчанию для элементов внутри контейнера flexbox или grid.
- В контейнере flexbox элементы flexbox выровнены по поперечной оси, которая по умолчанию вертикальна (противоположна направлению сгибания).
- В контейнере grid элементы сетки выровнены по направлению блока. Для страниц на английском языке направление блока - вниз, а направление встроенной строки - слева направо.
Чтобы это свойство имело какой-либо эффект выравнивания, элементам необходимо свободное пространство вокруг себя в соответствующем направлении.
Совет: Используйте CSS свойство align-self каждого элемента для переопределения свойства align-items.
| Значение по умолчанию: | normal |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.alignItems="center" Попробуй |
Поддержка align-items
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| align-items | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
Синтаксис align-items
align-items: normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit;
Значения align-items
| Значение | Описание | Демонстрация |
|---|---|---|
| normal | По умолчанию. Ведет себя как "растягивание" для элементов flexbox и grid или "запуск" для элементов grid с определенным размером блока. | Демо ❯ |
| stretch | Элементы растягиваются, чтобы поместиться в контейнер | Демо ❯ |
| center | Элементы располагаются в центре контейнера | Демо ❯ |
| flex-start | Элементы располагаются в начале контейнера | Демо ❯ |
| flex-end | Элементы располагаются в конце контейнера | Демо ❯ |
| start | Элементы располагаются в начале своих отдельных ячеек сетки в направлении блока | |
| end | Элементы располагаются в конце своих отдельных ячеек сетки, в направлении блока | |
| baseline | Элементы располагаются на базовой линии контейнера | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры align-items
Элементы располагаются в начале контейнера:
div {
display: flex;
align-items: flex-start;
}
Попробуйте сами »
Элементы располагаются в конце контейнера:
div {
display: flex;
align-items: flex-end;
}
Попробуйте сами »
Элементы располагаются на базовой линии контейнера:
div {
display: flex;
align-items: baseline;
}
Попробуйте сами »
Элементы растягиваются, чтобы поместиться в контейнер:
div {
display: flex;
align-items: stretch;
}
Попробуйте сами »
Пример с grid
Элементы выравниваются в начале каждой ячейки сетки в направлении блока:
#container {
display: grid;
align-items: start;
}
Попробуйте сами »
Пример с абсолютным позиционированием
Элементы выравниваются в конце каждой ячейки сетки в направлении блока для элементов сетки с абсолютным позиционированием:
#container {
display: grid;
position: relative;
align-items: end;
}
#container > div {
position: absolute;
}
Попробуйте сами »
Страницы по теме
CSS Учебник: CSS grid
CSS Учебник: CSS flexbox
CSS Справочник: align-content свойство
CSS Справочник: align-self свойство
CSS Справочник: justify-content свойство
CSS Справочник: justify-items свойство
CSS Справочник: justify-self свойство
HTML DOM справочник: alignItems свойство