时间戳

首页 > 解决方案 > 有没有办法将我的 h1 设置在段落的顶部，因为我使用 display flex 垂直设置它们

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

问题描述

如您所见，我使用 display flex 垂直对齐我的项目，但我希望 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>

标签： htmlcsswebtext

解决方案

将样式flex-direction: column;应用于您的部分 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>

推荐阅读