如何在没有包装器的情况下使用 Flexbox 垂直对齐 `` 元素中的文本？

在 Flexbox 中垂直对齐文本

使用 Flexbox 垂直对齐

中的内容时元素，你可能会遇到一些挑战。许多在线教程建议使用包装 div 来通过将align-items: center 分配给父级 Flex 设置来实现这种对齐。但是，可以消除对附加元素的需求。

要在没有包装器 div 的情况下实现垂直对齐，请将align-self：center调整为align-items：center。这个简单的修改确保了有效的对齐：

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;   // **NEW**
  background: silver;
  width: 100%;
  height: 20%;
}

请记住，align-self适用于flex项目，它需要一个带有display: flex或display: inline-flex的flex容器。在这种情况下，

是Flex容器，所以align-items是垂直对齐的合适属性。

以上是如何在没有包装器的情况下使用 Flexbox 垂直对齐 `` 元素中的文本？的详细内容。更多信息请关注PHP中文网其他相关文章！