ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。