フレックスボックスの「要素」内のテキストを垂直方向の中央に配置する方法

align-items を使用して Flexbox 内のテキストを垂直方向に配置する方法

Flexbox を使用して

内のコンテンツを垂直方向に配置する場合要素を使用して align-self: center を使用しようとすると、問題が発生する可能性があります。これを解決するには、代わりに align-items: center の使用を検討してください。

フレックス項目に適用される align-self とは異なり、align-items はフレックス コンテナーに適用できます。この場合、li 要素はフレックス コンテナであり、align-items: center でその子要素を垂直方向に中央揃えできるようになります。

必要な調整を加えた更新バージョンのコードを次に示します。

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* Remove align-self: center */
  align-items: center; /* Add align-items: center */
  background: silver;
  width: 100%;
  height: 20%;
}

align-items: center を使用すると、ラッパー div が不要になります。これにより、コードに不要な要素を導入することなく、li 要素内のテキストを垂直方向に整列させることができます。

以上がフレックスボックスの「要素」内のテキストを垂直方向の中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。