css - div内の画像のCSS垂直配置

Question

私はこのdivを持っていて、divの中に画像があります。私がやろうとしているのは、画像を中央に垂直に揃えることです.何も試してもうまくいかないようです...

<div style=" height: 200px; vertical-align: middle; width: 225px;">
<img width="225" src="upload/home5.jpg">
</div>

画像に a を追加することも試しましたvertical-align:middle;が、うまくいきませんでした。

誰でもアイデアはありますか？

私はいくつかのjQueryコードを使用していることに言及するのを忘れていました。それは私のdivを作りますposition:absolute;

これは、Jquery を通過した後の私の div の外観です。

<div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;">

ここに画像のcssがあります

img {    
    background-color: #eee;
    margin: auto;
    display:block;
}

score 1 · Accepted Answer

これには、div で display: table-cell を使用できます。これにより、vertical-align 属性が機能します。IE7 には対応していません。必要な場合は、他の解決策があります。

div { border: 1px solid gray; display: table-cell;  }
img { vertical-align:middle; }

1 に答える 1