参考代码:
<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 >
大部分人可能会考虑使用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也好了。