要素の垂直方向の中央揃えにフロートを使用できますか?

浮動要素の垂直中央配置: 詳細

コンテナ内の要素を垂直方向に配置するためにテーブルのようなプロパティを使用するのが一般的ですが、検討する価値はあります。 float を使用してこれを実現する実行可能な方法があるかどうか。

Float の制限

ただし、この点に関しては、float に固有の制限を認識することが重要です。 CSS 仕様に従って、フロートは本質的に、その垂直方向の位置を管理する厳密なルールに従って、それを含むブロックまたは行ボックスの上部に揃えられます。

回避策

それでも、CSS のニュアンスを活用することで、これらの制限を回避することができます。方法は次のとおりです:

1. インライン ブロック ラッパーの作成: 各浮動要素をインライン ブロック ラッパー内でラップし、ブロック フォーマット コンテキスト (BFC) を確立します。これを行うと、ラッパーにフロートが確実に含まれるようになります。
2. 垂直方向の配置: コンテナー内でインライン ブロック ラッパーを垂直方向に配置するには、vertical-align を使用します。これにより、その中の浮動要素も確実に垂直方向に整列します。
3. スペース修正の可能性: インライン ブロック ラッパー間にはある程度のスペースが存在する可能性があることに注意してください。これに対処するには、「インラインブロック要素間のスペースを削除するには?」を参照してください。考えられる解決策については。

以上が要素の垂直方向の中央揃えにフロートを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。