如何在没有包装器的情况下垂直对齐 Flexbox 容器内的文本？

Flexbox 容器内的垂直文本对齐

Flexbox 布局中内容的垂直对齐可能具有挑战性。以下是如何在不诉诸额外包装元素的情况下实现它。

在您的示例中，问题在于在

上使用align-self: center元素。相反，请使用align-items: center on theparent

;元素。这将在 Flexbox 容器内垂直对齐
• 的子元素。

  以下是更新后的代码：

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

  说明：

  • align-self 适用于各个弹性项目并控制它们的对齐方式。但是，就您而言，
  • 不是一个 Flex 项目，因为它的父项
    没有应用 display: flex。
  • align-items 控制 Flex 项目在其 Flex 容器内的对齐方式。自从
  • 是一个弹性容器，align-items: center有效地将
  • 内的元素垂直居中。
  • 从
  • 中删除align-self: center至关重要，因为它将覆盖由align-items指定的垂直对齐方式。

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