為什麼 `justify-content: center` 不使 Flex 容器中的文字居中？

帶有justify-content 的非居中文字：center

在Flex 容器中， justify-content 屬性使Flex 專案水平居中，但是它無法直接控制這些項目中的文字。當文字在專案內換行時，它會保留其預設的 text-align: start 值，從而導致文字不居中。

Flex 容器、Flex 項目和文字代表 HTML 結構中的三個不同層級。 justify-content 會影響 Flex 項目，而不是其中包含的文字。

如果 Flex 項目填充其容器的寬度，則它無法居中，因此換行時文字未對齊。

直接將文字置中，透過繼承將 text-align: center 指派給 Flex 項目或容器。

範例

<code class="css">.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}</code>

<code class="html"><div class="box">
  <p>some long text here</p>
</div>

<div class="box with-align">
  <p>some long text here</p>
</div></code>

以上是為什麼 `justify-content: center` 不使 Flex 容器中的文字居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！