positioning - 位置によるCSSセンタリング

Question

ページの中央に配置された絶対配置の div の例があります。

HTML

<div id="test1"><img src="http://www.interactivepixel.net/images/i01.jpg" width="500" height="333"/></div>

CSS

#test1{
   position:absolute;
   top:50%;    
   left:50%;
   width:500px;
   height:333px;
   margin-top:-166px;
   margin-left:-250px;
}

これは、ブラウザウィンドウを縮小してスクロールバーが表示されるまでうまく機能し、スクロールバーを使用しても画像の左側と上部が失われ、中央揃えのように画像の左側と上部をスクロールできませんもう働かない。

何故ですか？

score 0 · Accepted Answer

ウィンドウのサイズを縮小すると、本体のサイズのみが縮小され、画像や明示的にサイズ設定されdiv#test1た . bodyサイズがになるとしましょう。450x300 (width x height)つまり、div サイズよりも小さくなります500 x 333。

CSS の上と左のルールを div に適用する

あなたのdivの左はあなたのdivの(50% of 450) = 225 一番上に計算されます(50% of 300) = 150

だからあなたのdivはポイントから始まります(225, 150) ie (left, top)

次に、CSS の負のマージンを div に適用します。つまり、左に -250、上に -166 です。

つまり、あなたの div の位置はになり(225-250, 150-166) ie (-25, -16) absolute positionます。

つまり、ウィンドウサイズを絶対配置の div サイズよりも小さくすると、body(0, 0) から始まるため、div の一部が表示されなくなります。

そして、その div に上と左の負のマージンを与えたので、これを読んで div がどのように見えなくなったかを理解してください: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to -using-negative-margins/

要素を中央に配置するための一般的な css ベースのソリューションについては、このスレッドを確認できます。

1 に答える 1