Центрирование в CSS Grid ⇐ CSS

[Anonymous]

Я пытаюсь создать простую страницу с помощью CSS Grid.

Что мне не удается сделать, так это центрировать текст из HTML в соответствующих ячейках сетки. .

Я пробовал размещать контент в отдельных div как внутри, так и снаружи селекторов left_bg и right_bg и воспроизводить с некоторыми свойствами CSS безрезультатно.

Как это сделать?

Код: Выделить всё

html,
body {
margin: 0;
padding: 0;
}

.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}

.left_bg {
display: subgrid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
}

.right_bg {
display: subgrid;
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
}

.left_text {
grid-column: 1 / 1;
grid-row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center;
font-family: Raleway;
font-size: large;
}

.right_text {
grid-column: 2 / 2;
grid_row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center;
font-family: Raleway;
font-size: large;
}

Код: Выделить всё

Review my stuff



Hire me!

Подробнее здесь: https://stackoverflow.com/questions/455 ... n-css-grid