ブラウザ間で固定サイズの Div 内のコンテンツを垂直方向に整列させるにはどうすればよいですか?

定義された Div 内の垂直方向の配置

質問:

コンテンツを垂直方向に配置する方法指定された幅と高さの div 内で、ブラウザ間での均一性を確保し、テーブルセルを回避します。解決策?

答え:

このシナリオで垂直方向の配置を実現するには、いくつかの方法があります:

バージョン 1: ディスプレイ付きの親 Div as Table-Cell

このアプローチには、親 div の表示プロパティの設定が含まれます

バージョン 2: 表示ブロックとコンテンツ表示テーブルセルを備えた親 Div

ここでは、親 div は表示ブロックに設定され、コンテンツ div には表示テーブルセルが割り当てられ、垂直方向の配置はvertical-align で実現されます。 middle.

バージョン 3: 親 Div はフローティング、コンテンツ Div は表示テーブルセルとして使用されます

このメソッドでは、親 Div はフローティングされ、コンテンツ Div は次のように設定されます。 vertical-align: middle を使用して垂直方向の配置が適用された表セルを表示します。

バージョン 4:コンテンツ位置の絶対位置に対する相対的な親 Div 位置

このアプローチでは、特定の実装に対して正確な計算が必要です。親 div は相対的に配置され、コンテンツ div は絶対的に配置され、その上部が 50%、高さが 50% に設定され、margin-top はコンテンツ div の高さの半分として負号付きで計算されます。

以上がブラウザ間で固定サイズの Div 内のコンテンツを垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。