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

  • предыдущая страница align-items
  • Следующая страница all

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

align-self Свойство определяет способ выравнивания выбранного элемента в гибком контейнере.

Примечание:Свойство alignSelf будет перекрывать свойство align-items Свойства.

См. также:

Урок CSS:CSS Grid

Урок CSS:CSS Flexbox

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

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

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

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

Пример

Центрировать один из элементов внутри гибкого контейнера:

#myBlueDiv {
  align-self: center;
}

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

Синтаксис CSS

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

Значение свойства

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

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

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

Поддержка браузеров

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0
  • предыдущая страница align-items
  • Следующая страница all