如何在 Flexbox `` 元素中垂直居中文本？

如何使用align-items 在 Flexbox 中垂直对齐文本

当使用 Flexbox 垂直对齐

中的内容时元素，如果您尝试使用align-self：center，您可能会遇到困难。要解决这个问题，请考虑使用align-items: center。

与适用于弹性项目的align-self不同，align-items适用于弹性容器。在本例中，li 元素是 Flex 容器，允许使用align-items:center 垂直居中其子元素。

这是经过必要调整的代码更新版本：

ul {
  height: 100%;
}

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

使用align-items: center 消除了对包装div 的需要。它允许您垂直对齐 li 元素内的文本，而无需在代码中引入不必要的元素。

以上是如何在 Flexbox `` 元素中垂直居中文本？的详细内容。更多信息请关注PHP中文网其他相关文章！