DIV_html/css_WEB-ITnose の垂直方向中央揃えの画像の CSS スタイル

ご存知のとおり、画像の水平方向の中央揃えは比較的簡単ですが、画像の垂直方向の中央揃えはさらに面倒です。今日は情報を確認し、互換性のある div での画像の統合を実現するための独自のテスト コードを作成しました。 IE、FF、Chromeなどの主流ブラウザ。 CSSスタイルコードは次のとおりです。青;

} .example2 {

背景: 緑;

セルの垂直方向の配置: 中央; -size: 183px; HTML コードは次のとおりです:

H & lt; h3 & gt; 例では、div のサイズは 210px * 158px です。 & lt;/ h3 & gt; class = "注意" & gt; ここで DIV 内の画像は垂直方向に中央揃えになり、DIV の幅は画像と同じ幅に具体的に設定されます。画像の水平方向の中央揃えはより簡単です。 div{text; を設定できます。 -align:center} p >

" >
gt;
div の中央に表示するには、 div{display:table-cell;vertical-align:center} div img {vertical:middle} < を設定します。 ;/ h3＆gt; IE6/7も通ります。
0x210.jpg" /> < ;/div>





ご質問がございましたら、メッセージを残してください。