為什麼在 Flexbox 中使用 `align-items: center` 而不是 `align-self: center` 進行垂直文字對齊？

Flexbox 中文字的垂直對齊方式

嘗試在 Flexbox 中垂直對齊文字時，使用align-self: center 可能無法產生所需的結果。相反，建議使用align-items: center來有效地實現垂直對齊。

ul {
  height: 100%;
}

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

使用align-items: center直接影響Flex容器，而align-self: center適用於Flex專案。由於在這種情況下 li 建立了一個 Flex 容器，因此align-items: center 可以適當地垂直對齊子元素。

<ul>
  <li>This is the text</li>
</ul>

總之，對於 Flexbox 內的垂直文字對齊方式，align-items: center 應該取代align-自我：中心。這可確保父 Flex 容器適當地垂直定位其子元素，從而達到所需的對齊效果。

以上是為什麼在 Flexbox 中使用 `align-items: center` 而不是 `align-self: center` 進行垂直文字對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！