ラッパーなしでフレックスボックスを使用して `` 要素内のテキストを垂直方向に配置する方法?

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

フレックスボックスを使用して

内のコンテンツを垂直方向に配置する場合。要素によっては、いくつかの課題が発生する可能性があります。多くのオンライン チュートリアルでは、ラッパー div を使用して、親の flex 設定に align-items: center を割り当てることでこの配置を実現することを提案しています。ただし、追加要素の必要性を排除することは可能です。

ラッパー div を使用せずに垂直方向の配置を実現するには、align-self: center を align-items: center に調整します。この簡単な変更により、効果的な位置合わせが保証されます。

ul {
  height: 100%;
}

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

align-self は flex アイテムに適用されることに注意してください。これには、display: flex または display: inline-flex の flex コンテナが必要です。この場合、

はフレックス コンテナであるため、垂直方向の配置には align-items が適切なプロパティです。

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