Question

我想要的是相对简单的。我想知道如何让这个页面上的H1元素集中在中间的段落元素上。我在这里遇到了很多麻烦，需要一些帮助才能在flexbox中解决这个问题。谢谢，这是我的代码

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="flex.css">
  </head>
  <body>


    </div>
    <div class="parent">

      <div class="col1">
      <h1>Heading 1</h1>
       <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna
       aliqua. Ut enim ad minim veniam, quis nostrud exercitation
       ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit
       esse cillum dolore eu fugiat nulla pariatur. Excepteur
       sint occaecat cupidatat non proident, sunt in culpa qui
       officia deserunt mollit anim id est laborum
      </p>
    </div>

      <div class="col2">

        <h1>Heading 2</h1>
      <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum
     </p>
     </div>
    </div>
  </body>
</html>

这是我的CSS

.parent, .col1, .col2 {
  display: flex;
   flex-flow row wrap;
}

h1 {
  align-self:center;
}

Answer 1

您不必在.col1中使用flex属性，.col2使其灵活，您希望内部的项目（例如h1和p也可以作为弹性项目对齐。因此，移除display:flex表单.col1，.col2并在text-align中设置h1

＆＃13;

  .parent {
  display: flex;
   flex-flow row wrap;
   }

h1 {
  text-align:center;
 }

＆＃13;

  <body>



    </div>
    <div class="parent">

      <div class="col1">
      <h1>Heading 1</h1>
       <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna
       aliqua. Ut enim ad minim veniam, quis nostrud exercitation
       ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit
       esse cillum dolore eu fugiat nulla pariatur. Excepteur
       sint occaecat cupidatat non proident, sunt in culpa qui
       officia deserunt mollit anim id est laborum
      </p>
     </div>

      <div class="col2">

        <h1>Heading 2</h1>
      <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum
     </p>
     </div>
    </div>
  </body>

＆＃13;

Answer 2

将justify-content: center;添加到col1和col2 divs

Answer 3

只需要进行一个小调整，而不是使用align-self：center样式，使用text-align：center属性，因为它将文本对齐而不是框本身。同样在flexbox中，只有父级需要显示：flex;属性，而不是列。用你的样式替换你在问题中提供的样式，它应该按预期工作。如果这回答了您的问题，请告诉我。你还在开口体标签下方有一个额外的标签，它没有开口的div标签，应该被删除。

https://codepen.io/Katercode/pen/BxOWvw

.parent {
  display: flex;
  flex-flow: row wrap;
}

h1 {
  text-align: center;
}

Flexbox：尝试将H1元素放在段落元素之上

3 个答案: