Одной из распространенных проблем, с которой сталкиваются начинающие разработчики, является центрирование текста в ячейках сетки CSS Grid. Допустим, есть простая веб-страница, разделенная на две части с помощью CSS Grid. Задача — центрировать текст в каждой из этих областей.
Во многих случаях начинающие разработчики используют CSS свойство justify-self: center; для центрирования текста. Однако это не всегда работает, как ожидается. Проблема в том, что justify-self: center; центрирует содержимое только по горизонтали. Если нужно центрировать текст и по вертикали, необходимо использовать дополнительные свойства.
Решение этой проблемы может быть следующим. Во-первых, вместо использования display: subgrid; для ячеек сетки, можно использовать display: grid;. display: grid; позволяет применить свойства CSS Grid к содержимому ячейки.
Теперь можно центрировать текст в ячейке с помощью свойств justify-content и align-content, которые центрируют содержимое ячейки по горизонтали и вертикали соответственно. Пример CSS кода для левой ячейки может выглядеть следующим образом:
.left_bg {
display: grid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
justify-content: center;
align-content: center;
}
Также необходимо убедиться, что текст помещен в ячейку сетки. Правильная структура HTML может выглядеть следующим образом:
<div class="container">
<div class="left_bg">
<p class="left_text">Review my stuff</p>
</div>
</div>
Теперь текст будет центрирован как по горизонтали, так и по вертикали в каждой ячейке сетки.
Добавить комментарий