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