4

DIV 要素内の画像を垂直方向に中央揃えする次の手法に出会いました。

<div>
    <img src="someimage.png" />
</div>

div {
    position:relative;
    width:400px;
    height:300px;
    border: solid 1px #cccccc;
}

img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

ここでフィドルを作成しました：http://jsfiddle.net/MryZv/1/

この手法に関する Web 上のヒントは見つかりませんでした。

私が見逃している警告はありますか？使用しても「安全」ですか？

4

1 に答える 1

4

このメソッドは、CSS 2.1 仕様のセクション 10.6.4 および 10.6.5 (絶対配置、非置換/置換要素) で十分に根拠があり、文書化されています。

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

絶対配置要素の高さは、次の制約に従って計算されます。

   'top' + 'margin-top' + 'border-top-width' + 'padding-top' 
+ 'height' 
+ 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' 
= height of containing block

画像の場合、特に制限しない限り、高さは画像の固有の高さに設定できます。

値margin-topをmargin-bottom使用するauto場合、これらの余白は等しいと仮定して計算され、垂直方向のセンタリングが可能になります。

計算された幅にも同様のロジックが適用されます。

オーバーフロー状態を引き起こす可能性のある大きな画像がない限り、これは CSS 2.1 準拠のブラウザーで機能する方法です。

于 2013-06-02T21:23:49.417 に答える