有没有办法将我的 h1 设置为段落顶部，因为我使用显示 flex 垂直设置它们

Question

正如您所看到的，我已经使用显示伸缩来垂直对齐我的项目，但我希望h1在段落的顶部。[在图片中你可以看到文字是如何在中间对齐的。][1][1]: https://i.stack.imgur.com/YHj02.png

section{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
scroll-snap-align: start;
}

.one{
text-align: center;
}

<section id="about" class="one">
<h1>Lorem ipsum dolor sit amet consectetur.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat quo accusamus dolor, commodi repudiandae animi esse delectus ipsa <br>magni sed at expedita sint, beatae nulla? Adipisci quasi sint earum quo illo facere voluptatibus, praesentium est <br>neque tempore vitae quas aliquid molestias sit et ut, blanditiis <br>necessitatibus labore ducimus asperiores obcaecati!</p>
<img src="./img/undraw_New_message_re_fp03.png" alt="img">
</section>

Answer 1

将样式flex-direction: column;应用到section css选择器中，如下所示:

section{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* color: white; */
scroll-snap-align: start;
}

.one{
text-align: center;
}

<section id="about" class="one">
<h1>Lorem ipsum dolor sit amet consectetur.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat quo accusamus dolor, commodi repudiandae animi esse delectus ipsa <br>magni sed at expedita sint, beatae nulla? Adipisci quasi sint earum quo illo facere voluptatibus, praesentium est <br>neque tempore vitae quas aliquid molestias sit et ut, blanditiis <br>necessitatibus labore ducimus asperiores obcaecati!</p>
<img src="./img/undraw_New_message_re_fp03.png" alt="img">
</section>