Clever Geek Handbook

divの垂直方向の配置

cssing.org.uaに基づきます。



ブロック内の垂直方向の配置について、W3C開発者は素晴らしい表示プロパティを作成しました：table-cell; 、任意の要素を表のセルとして表示できます。 同時にvertical-align：middle;を追加します。 Internet Explorer向けではない場合は、うまく機能します。InternetExplorerはdisplay：table-cellプロパティをサポートしません。 。





以下は、IEが他のブラウザと同様にブロックのコンテンツを中央に表示するのに役立つサンプルコードです。



HTML： 

 <div class = "container">
   <p class = "middled">垂直方向に中央揃えされた要素</ p>
 </ div>




CSS： 

 .container {
  ディスプレイ：テーブルセル。
  垂直整列：中央;
 }
 .middled {
   margin-top：expression（（parentNode.offsetHeight-this.offsetHeight）<0？ "0"：（parentNode.offsetHeight-this.offsetHeight）/ 2 + "px"）;
 }




IEを飼いならすために、「om」 という表現を使用しました。 式は次の機能を実行します。親要素と子要素の高さを計算し、それらの差を半分に分割し、結果の数値を子要素の上部インデント値として使用します。 式は、条件付きコメントを使用して別のcssファイルで削除するのが最適です。



このメソッドとcssing.org.uaの記事で説明されているメソッドの違いは、クラスに使用できることです。一方、cssing.org.uaを使用したメソッドは識別子にのみ適しています。



誰かが役に立つといいな。


More articles:


All Articles