ラッパーを使用せずにフレックスボックスコンテナ内のテキストを垂直方向に整列させるにはどうすればよいですか?

フレックスボックス コンテナ内のテキストの垂直方向の配置

フレックスボックス レイアウト内のコンテンツの垂直方向の配置は難しい場合があります。追加のラッパー要素に頼らずにこれを実現する方法は次のとおりです。

この例では、問題は

上で align-self: center を使用することにあります。要素。代わりに、親

を中心に align-items: を使用してください。要素。これにより、
• の子要素がフレックスボックス コンテナ内で垂直に配置されます。

  更新されたコードは次のとおりです:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;  /* Updated this line */
  background: silver;
  width: 100%;
  height: 20%;
}

説明:

• align-self は個々の flex 項目に適用され、それらの配置を制御します。ただし、あなたの場合、
• 親
  に display: flex が適用されていないため、これはフレックス アイテムではありません。
• align-items は、フレックス コンテナ内のフレックス アイテムの配置を制御します。
• 以来、はフレックス コンテナです。align-items: center は、
• 内の要素を効果的に垂直方向に中央揃えします。
• から align-self: center を削除します。これは、align-items で指定された垂直方向の配置をオーバーライドするため、重要です。

以上がラッパーを使用せずにフレックスボックスコンテナ内のテキストを垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。