Я пытаюсь центрировать текст по центру экрана. По какой-то причине это не работает. Я работаю над следующим index.html. Что я делаю не так?
Document
.outer-container {
display: flex;
flex-direction: column;
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
}
span {
padding: .5rem;
}
HEADING
Some text here.
Я думал, что гибкий макет заполняет все доступное пространство. Поскольку мое гибкое направление — «столбец», я ожидал, что внешний контейнер заполнит всю высоту моего экрана, но, видимо, это не так.
Обновить
Я обновил свой код. Теперь я поместил свой внешний контейнер и внутренний контейнер внутри родительского контейнера, чтобы продемонстрировать проблему, с которой я столкнулся при установке высоты внешнего контейнера на 100vh: Как вы можете видеть, проблема в том, что высота 100vh для моего внешнего контейнера теперь слишком велика - правильная высота будет 100vh минус высота заголовка.
Document
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
Header
HEADING
Some text here.
Подробнее здесь: https://stackoverflow.com/questions/752 ... f-a-screen
