html - 在 Flexbox 的相反方向上垂直对齐文本

Question

我有一个包含两个 div 的水平 Flexbox，并且希望将其中一个文本垂直居中。

Here is a toy example我的意思是。我不确定它当前如何选择对齐文本，但我希望这样，如果您将 post_title 的高度更改为 1000px，标题本身会跳到页面下方(即，在 div 内保持垂直居中)。

其他解决方案告诉我改变 Flexbox 的方向，这会弄乱整个事情，或者使用 align-items 或 justify-items 这看起来两者绝对什么也不做。我不希望文本水平居中。

我怎样才能简单地垂直居中这个标题？

Answer 1

align-self 属性就是您所需要的。我在下面添加了一个工作示例。

示例:

.post {
  border: 1px solid #333333;
  display: flex;
}

.post_title {
  align-self: center; /* Center title vertically */
  width: 400px;
}

.post_desc {
  font-size: 10px;
}

<div class="post">
  <div class="post_title">
    <h3 title="{{ post.title }}">
      Test
    </h3>
  </div>
  <div class="post_desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel purus laoreet mi faucibus tempor. Maecenas id venenatis odio. Integer porttitor neque ut lorem lacinia tincidunt. Sed metus neque, elementum vitae condimentum vel, volutpat sed dui. Nulla euismod tempus ullamcorper. Phasellus aliquet nisi eu odio viverra, eu consectetur ex consequat. Nam gravida finibus ante, in ultrices erat finibus a. Maecenas porttitor tristique elit, non interdum mauris commodo ac.
    </p>
  </div>
</div>