Вертикально по центру: родительский элемент с 2 дочерними элементами
Пожалуйста, взгляните на этот код:
<div class = "parent">
<header class = "child-1">
<h1 class = "float-left">lorem...</h1>
<div class = "float-right">lorem...</div>
</header>
<div class = "child-2">lorem...</div>
</div>
CSS выглядит так:
.parent {
display: flex;
align-items: center;
}
Применение этого приводит к тому, что и дочерний элемент-1, и дочерний элемент-2 центрируются по вертикали в одной строке. Мне нужно, чтобы дочерний элемент-2 начинался со строки 2, т. е. прямо под дочерним элементом-1.
заранее спасибо
Ответы 2
Установите flex-direction:
.parent {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}<div class = "parent">
<header class = "child-1">
<h1 class = "float-left">lorem...</h1>
<div class = "float-right">lorem...</div>
</header>
<div class = "child-2">lorem...</div>
</div>Тогда вы, вероятно, захотите настроить align-items, так как я предполагаю, что вы на самом деле не хотите центрировать все по горизонтали.
Отредактировано. Вам нужно установить justify-content, чтобы настроить вертикальное выравнивание гибкого столбца.
Спасибо, это решает проблему. Большое спасибо. Но без высоты: 100%
.parent {
display: flex;
flex-direction: column;
align-items: center;
}
Было бы здорово, если бы вы добавили несколько комментариев к своему ответу, чтобы помочь другим людям понять его. Одна из основных целей этого сайта — учиться друг у друга.
Спасибо за ваше предложение, мой английский плохой. Я пытаюсь улучшить свой уровень владения английским языком.
Настройка flex-direction: column немного помогает, но проблема в том, что child-2 является динамическим, иногда он появляется в разметке, а иногда нет. Если он появляется, то стиль работает, как и ожидалось, но если нет, то child-1 больше не центрируется по вертикали.