css圖片在div內上下居中的方法

參考代碼：< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 - this.height ) / 2);” />
< /div >

要想讓圖片左右對齊，我們可以在div裏寫入”style:text-align:center;”,左右居中問題好解決，現在看一下，IE6,IE7和firefox裏，圖片都已經是左右居中了，技術的難點是如何讓圖片在三個瀏覽器垂直居中。

大部分人可能會考慮使用vertical-align:middle來使圖片居中，加上去看看沒有出現效果，這裏我們針對圖片設置如下代碼：style=”_margin-top: expression(( 300 - this.height ) / 2);發現在IE6下效果實現了，再看看IE7和firefox, 沒有變化，這裏我們針對IE7和firefox來設置，在div裏寫入line-height:300px;vertical-align:middle,發現IE7這時候也有效果了，這裏的line-height:300px;是根據div的高度定的，如果div的高度爲100px,則這裏設置line-height:100px,這裏我們設置爲300px。那麼，這時候IE解決了，看一下firefox圖片還沒垂直居中，再對div增加樣式:display:table-cell,現在再看看firefox也好了。