Flex コンテナ内のテキストを「justify-content: center」で中央揃えにしないのはなぜですか?

justify-content を含む中央揃えでないテキスト: center

フレックス コンテナでは、justify-content プロパティはフレックス項目を水平方向に中央揃えにしますが、これらの項目内のテキストを直接制御することはできません。テキストがアイテム内で折り返されると、デフォルトの text-align: start 値が保持され、テキストが中央揃えにされなくなります。

フレックス コンテナ、フレックス アイテム、およびテキストは、HTML 構造内の 3 つの異なるレベルを表します。 justify-content は、フレックス アイテムに含まれるテキストではなく、フレックス アイテムに影響します。

フレックス アイテムがコンテナの幅を満たす場合、中央に配置することができないため、折り返し時にテキストの位置がずれます。

Toテキストを直接中央に配置するには、継承を通じて flex アイテムまたはコンテナに text-align: center を割り当てます。

例

<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>

以上がFlex コンテナ内のテキストを「justify-content: center」で中央揃えにしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。