Align Items Center: The Ultimate Guide
CSS свойство align-items - определяет горизонтальное выравнивание элементов внутри блочного контейнера.
Значение "center" выравнивает элементы по центру по оси перпендикулярной оси сортировки. Другими словами, элементы будут располагаться по вертикальной оси в центре контейнера.
Пример CSS кода:
.container {
display: flex;
align-items: center;
}
.container div {
margin: 10px;
width: 50px;
height: 50px;
background-color: red;
}
В данном примере все элементы div внутри контейнера будут выравниваться по центру по вертикальной оси благодаря свойству align-items: center.
Также можно использовать данное свойство для выравнивания одиночного элемента в контейнере:
.item {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: blue;
}
Some text
В данном примере параграф с текстом будет выровнен по центру и горизонтали и вертикали благодаря свойствам align-items и justify-content.