css图片在div内上下居中的方法

标签：style   使用   io   ar   问题   div   代码   line   

参考代码：< 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也好了。

css图片在div内上下居中的方法,布布扣,bubuko.com

css图片在div内上下居中的方法

标签：style   使用   io   ar   问题   div   代码   line   

原文地址：http://www.cnblogs.com/cinderlla/p/3926814.html