さまざまなブラウザの未知の高さ div 垂直センタリング効果と互換性_html/css

さまざまなブラウザの未知の高さ div 垂直センタリング効果と互換性_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:41:22

オリジナル

1572 人が閲覧しました

さまざまなブラウザでの不明な高さの div の垂直方向のセンタリング効果と互換性があります:
親オブジェクトで div を垂直方向にセンタリングすることは、親要素で div を水平方向にセンタリングすることほど単純ではありません。単にこの要素にマージンを設定するだけで十分です。 . 一部の属性を使用することで親要素内でdivを縦方向に中央揃えすることができますが、一部のブラウザでは対応していませんので、主なブラウザに対応した方法をご紹介します。
まずコード例を見てみましょう:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title> <style type="text/css"> .parent {   width:200px;   height:200px;   background-color:green;   display:table-cell;   vertical-align:middle; } .children {   background-color:red;   width:80px;   text-align:center;   margin:0px auto; } </style> </head> <body> <div class="parent">   <div class="children">蚂蚁部落</div> </div> </body> </html>

ログイン後にコピー

上記のコードは標準ブラウザで正常に実行され、親要素内で子要素を垂直方向に中央揃えにすることができますが、IE6 と IE7 はそれほど強力ではないため、コードを変更する必要があります。 . 、IE6 および IE7 ブラウザと互換性を持たせるために、構造的な変更を行わずに CSS 互換コードを追加するだけでは、IE6 および IE7 との互換性を実現することは困難になります。上記のコードは実装されています。divを垂直方向に中央揃えにします。このコード部分を最初のコード部分の修正バージョンとみなす必要はありませんが、次のコードがこの効果を実現する方法を簡単に紹介します。

1. 実装アイデア:

以降。 IE6 および IE7 の Display:table-cell および display:table はサポートされていないため、子オブジェクトの幅が設定されていない場合、当然ながら、中央のオブジェクトの高さは子オブジェクトの高さと同じになります。全く同じです。 IE6 および IE7 では中央のオブジェクトに絶対配置を使用し、参照オブジェクトが親オブジェクトであり、その上部の値を 50% に設定して、中央のオブジェクトの上端がオブジェクトの垂直位置のちょうど中央にくるようにします。親オブジェクト。また、子オブジェクトの位置決めを使用し、その上部の値を -50% に設定して、中央の高さの半分だけ上に移動し、子オブジェクトの中心が図の垂直方向の中央に位置するようにします。これにより、子オブジェクトの垂直方向の中央揃え効果が得られます。ここにいる友人の中には、なぜ他の標準ブラウザがこのメソッドを使用しないのかと疑問に思う人もいるかもしれません。これは、中央のオブジェクトの高さが設定されていないと、セットトップ属性が有効にならないからです。次の図は、中央の背景色を青に設定した後の IE6 および IE7 での実行のレンダリングです:

2. 知識ポイント:

1. アスタリスク (*) は、IE6 および IE7 ブラウザーとの互換性を示します。

2. Display:table は、中央のオブジェクトの display:table-cell に対応する親オブジェクトに追加する必要があります。それ以外の場合、中央の要素のサイズとコンテンツは、親要素と同じサイズではなく、適応されます。子オブジェクトがコンテナ内で垂直方向の中央に配置されるため、標準のブラウジングを実装できなくなります。

元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/503.html