如何在 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中文網其他相關文章！