如何在沒有包裝器的情況下垂直對齊 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中文網其他相關文章！