Ситуация, когда требуется вертикально выровнять текст внутри flexbox, является довольно обычной. Рассмотрим пример, в котором есть необработанный список (<ul>), содержащий элементы списка (<li>), в которых есть текст. Стандартное поведение HTML приводит к тому, что текст внутри <li> будет выравниваться по верхнему краю.
<ul>
<li>Это текст</li>
</ul>
ul {
height: 100%;
}
li {
background: silver;
width: 100%;
height: 20%;
}
Для достижения цели вертикального выравнивания текста внутри flexbox, можно использовать свойство CSS display: flex;. Это свойство делает элемент контейнером flexbox и позволяет использовать свойства flexbox для выравнивания содержимого.
li {
display: flex;
align-items: center;
justify-content: center;
background: silver;
width: 100%;
height: 20%;
}
В данном примере используются два свойства flexbox: align-items и justify-content. Align-items контролирует выравнивание элементов flexbox по вертикали (если основная ось горизонтальна), а justify-content — по горизонтали. Значение center для обоих свойств обеспечивает центрирование содержимого элемента списка по обоим направлениям.
Таким образом, использование flexbox позволяет легко и просто вертикально выравнивать текст внутри контейнера.
Добавить комментарий