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

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

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

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

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

Example

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}

  
some long text here



  
some long text here