Question

我正在尝试使用flexbox垂直对齐帖子中的内容。我希望标题是顶部对齐的，页脚是底部对齐的，文本副本应与其他帖子的文本副本对齐。标题和文本副本的长度因不同的职位而异。当我在标题中使用justify-content: spance-between时，文本副本被推到底部。我希望文本复制在标题之后开始。您能帮我解决这个问题吗？

body {
  background-color: #eee;
  font-family: sans-serif;
}

.posts {
  display: flex;
  max-width: 700px;
  margin: 0 auto;
}

.post {
  flex-basis: calc(100%/3);
  padding: 1em;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

<div class="posts">
  <section class="post">
    <header>
      <h4 class="post__heading">Lorem ipsum dolor sit amet</h4>
      <p class="post__abstract">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.</p>
    </header>
    <footer class="post__footer">
      <p>Lorem ipsum dolor</p>
    </footer>
  </section>

  <section class="post">
    <header class="post__header">
      <h4 class="post__heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </h4>
      <p class="post__abstract">Lorem ipsum dolor sit amet, </p>
    </header>
    <footer class="post__footer">
      <p>Lorem ipsum dolor</p>
    </footer>
  </section>

  <section class="post">
    <header>
      <h4 class="post__heading">Lorem ipsum dolor sit amet</h4>
      <p class="post__abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </header>
    <footer class="post__footer">
      <p>Lorem ipsum dolor</p>
    </footer>
  </section>


</div>

Answer 1

您想使居中对齐什么，请将属性赋予父类'justify-content：center; align-items：center;'

请将我的CSS添加到您现有的CSS中，您会看到居中内容现在居中对齐

建议的CSS

.post__header{
    display: flex;
  justify-content: center;
  align-items: center;
}
.post__header h4,
.post__header p{
    color: #f00;

}

查看演示 enter link description here

如何在Flexbox中对齐内容

1 个答案: