Question

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

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>

Answer 2

在 div.post h3 {} 添加

   margin: 0;
   position: relative;
   top: 50%;
   transform: translateY(-50%);

这是在任何元素内垂直对齐任何元素的方法。

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

2 个答案: