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