Свойство align-items CSS

Определение и использование

align-items Свойство, чтобы определить默认 способ выравнивания элементов в эластичном контейнере.

Совет:Используйте для каждого элемента align-self Свойства, чтобы перезаписать этот alignItems атрибут.

См. также:

Обучение CSS:CSS Grid

Обучение CSS:CSS Flexbox

Руководство по CSS:Свойство alignContent

Руководство по CSS:Свойство alignSelf

Руководство по CSS:Свойство justifyContent

Руководство по CSS:Свойство justifyItems

Руководство по CSS:Свойство justifySelf

Руководство по HTML DOM:Свойство alignItems

Пример

Центрировать все элементы внутри эластичного <div> элемента:

div {
  display: flex;
  align-items: center;
}

Попробуйте сами

CSS синтаксис

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Значение атрибута

Значение Описание
stretch По умолчанию. Элементы растягиваются, чтобы соответствовать контейнеру.
center Элементы расположены в центре контейнера.
flex-start Элементы расположены в начале контейнера.
flex-end Элементы расположены в конце контейнера.
baseline Элементы позиционируются на базовой линии контейнера.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Этот атрибут наследуется от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: stretch
Инheritance: нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.alignItems="center"

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0