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

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

Patricia Arquette

リリース： 2024-12-20 16:09:12

オリジナル

800 人が閲覧しました

How to Vertically Align Text Within a Flexbox Container Without a Wrapper?

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

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

この例では、問題は

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

の子要素がフレックスボックスコンテナ内で垂直に配置されます。
更新されたコードは次のとおりです:

ul {
  height: 100%;
}

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

ログイン後にコピー

説明:

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

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