インラインブロック要素を使用して、高さが不明な浮動要素を垂直方向の中央に配置する方法

インラインブロック要素を使用して高さが不明な浮動要素を垂直方向の中央に配置する方法

浮動要素は本質的に互いに隣接して配置されますが、通常は上から下に配置されます。 -身長に関係なくトップ。これにより、特定のレイアウトで予期しない垂直方向のずれが発生する可能性があります。

高さが不明なフローティング要素を垂直方向の中央に配置するには、フロートの自然な上部配置を回避する必要があります。これは、次の手順を使用することで実現できます。

1. インライン ブロック ラッパーの作成: 各フローティング要素をインライン ブロック要素で囲みます。インラインブロック要素は水平方向に流れ、フロートが隣接する位置を保持できるようにします。インラインブロックラッパーに。このプロパティは、インライン ブロック要素の垂直方向の配置を指定し、その結果、要素内のフローティング要素を垂直方向の中央に配置します。
2. 並べて配置するための幅の調整: インライン ブロック要素が-block ラッパーは横に並べて配置され、その幅を合計すると 100% になるパーセンテージ値に設定します。これにより、水平方向の隣接性を維持しながら、使用可能なスペースを柔軟に調整できます。
3. これらの手順に従うことで、フローティング要素自体を変更せずに、高さが不明なフローティング要素を垂直方向の中央に配置できます。この技術により、高さが異なる動的コンテンツを視覚的にバランスの取れたレイアウトにシームレスに統合できます。

以上がインラインブロック要素を使用して、高さが不明な浮動要素を垂直方向の中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。