高さが不明な浮遊要素を垂直方向に整列させるにはどうすればよいですか?

高さが不明な浮遊要素を垂直に整列する

中央の外側の分割内で高さが不明な浮遊要素を垂直に整列しようとすると、次のような問題が発生する可能性があります。フロートの自然な上部配置による困難。ただし、インライン レベルの要素とvertical-align プロパティを使用して垂直方向の配置を実現する別のアプローチもあります。

垂直方向の配置方法:

フローティング要素を垂直方向に配置するには外側の分割内で、次の手順に従います。

1. インライン レベル ラッパーの作成: 各フロートを別個のインライン レベル要素内でラップします (表示: inline- など)。ブロックプロパティ。これにより、フロートごとに新しいブロック フォーマット コンテキスト (BFC) が確立されます。
2. ラッパーをインラインで配置: インライン レベルのラッパーは、そのインラインの性質により、互いに隣り合うインラインに配置されます。 .
3. ラッパーを垂直に整列: インライン レベルのラッパーでvertical-align プロパティを使用して、外側の部分内でラッパーを垂直に整列させます。

潜在的な問題:

インラインレベルのラッパーの間にはスペースが残る可能性があることに注意してください。これに対処するには、提供された回答で言及されているものなど、インラインブロック要素間のスペースの削除に関する追加リソースを参照してください。

結論:

display: inline-block プロパティとvertical-align プロパティを使用すると、外側の分割内の高さが不明な浮動要素を効果的に垂直方向に整列させることができます。

以上が高さが不明な浮遊要素を垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。