如何在柔性盒内垂直对齐文本？

Question

如何在柔性盒内垂直对齐文本？

我想使用Flex框垂直对齐<li>但没有取得很大的成功。

我已经在线检查过了，很多教程实际上使用了包装div，它获得了align-items:center但是我想知道是否有可能删除这个额外的元素？

我选择在这个实例中使用FLEX框，因为列表项的高度将是动态%。

* {

  padding: 0;

  margin: 0;

}

html, body {

  height: 100%;

}

ul {

  height: 100%;

}

li {

  display: flex;

  justify-content: center;

  align-self: center;

  background: silver;

  width: 100%;

  height: 20%;

}

<ul>

  <li>This is the text</li>

</ul>

Answer 1

如果你做了flex-direction垂直(使用)column)然后justify-content: center垂直中心。然后你就可以用text-align: center也要水平地居中。li&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;flex-direction:&nbsp;column; &nbsp;&nbsp;text-align:&nbsp;center;}这是一个代码演示.

Answer 2

对于未来的谷歌人来说，投票最多的答案，也是第二大的答案，都是为了解决问题。这个具体问题由OP发布，内容(文本)被包装在内联块元素中，内容(文本)是“算法级的”。但是，你的案子可能是关于在容器内垂直对齐法线元素，这也适用于我的情况，因此您所需要的就是align-self:&nbsp;center;只需在这里列出这一点，因为这是上述查询的最高结果，而且我也相当困惑了很长一段时间*德普&nbsp;*