HTML-центр с гибкой компоновкой CCS
Я использую этот пример codepen как основу простого сайта.
Это работает хорошо, но я бы хотел, чтобы макет располагался по центру страницы, а не на всю высоту. Пожалуйста, смотрите пример изображения.
Есть ли способ сделать это и сохранить гибкость страницы?
Я пробовал добавлять height или max-height к обертке, но это не имело никакого значения.
Спасибо
попробуйте посмотреть это: stackoverflow.com/questions/6464592/…
Ответы 2
Итак, вы хотите использовать align-items: center;. Но вы должны выбрать, где его использовать. Если вы хотите, чтобы боковая панель оставалась такой, какая она есть, вам следует немного изменить html-код:
<div class = "content">
<div class = "inner">
Actual content goes here.
</div>
</div>
и в css:
.content {
display: flex;
justify-content: center;
}
Теперь желтый фон останется прежним, но текст будет центрирован по вертикали.
Если вы поместите display: flex; и justify-content: center; на .main, и боковая панель, и контент будут центрированы. Тогда это будет выглядеть так:
HTML:
<div class = "content">
Actual content goes here.
</div>
и CSS:
.main {
flex: 1;
display:flex;
align-items:center;
}
Обновлено: Поскольку я неправильно понял вопрос, я отвечу на него здесь, но я оставлю часть выше, потому что кто-то может найти ее полезной.
Итак, вам нужно будет изменить стиль для .wrap. Поскольку у вас установлено flex-direction: column;, чтобы центрировать его по вертикали, вы должны использовать justify-content: center; вместо align-items: center, потому что теперь главная ось является вертикальной. Так:
.wrap {
display: flex;
...
justify-content: center;
}
.main {
max-height: 500px; /* set whatever you want */
...
}
он говорит не о боковой панели, а о всей странице, говоря о height и max-height. Таким образом, единственный логический вывод состоит в том, что он пытается центрировать весь элемент по вертикали.
Хорошо, тогда я отредактирую свой ответ.
Это вся страница, которую я хотел бы центрировать, а не ее содержимое. Codepen показывает страницу, занимающую всю высоту экрана. Мое изображение является примером того, что я пытаюсь сделать. Спасибо
хорошо, позвольте мне отредактировать мой ответ.
используйте свойство align-items для этой задачи
.main {
flex: 1;
display:flex;
align-items:center;
}
Это также будет центрировать боковую панель, и я не думаю, что это то, что он ищет.
он говорит обо всей странице, говоря о height и max-height. Таким образом, единственный логический вывод состоит в том, что он пытается центрировать весь элемент по вертикали.
@tacoshy - исправьте всю страницу, которую я хотел бы центрировать. Как мне это сделать ?
@Rocket у вас есть 2 комментария под вашими вопросами со ссылками на решения. Особенно последний сможет вам легко помочь
уже есть несколько вопросов с ответчиком о том, как вертикально центрировать div или элементы на SO: stackoverflow.com/questions/396145/… - что у вас там не работает? гибкость с вертикальным центром является широким термином. Ни в коем случае на отзывчивость не влияют центрирующие элементы.