如何让图片在div里左右居中,上下居中
![](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
1、要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现。
2、要想使图片居中,多数人可能会考虑使用"vertical-align:middle"代码。这样加上后发现却没有出现效果。
IE、firefox浏览器的逐步解决方法:
1)针对图片设置如下代码:style="_margin-top: expression_r(( 300 - this.height ) / 2)";发现在IE6下效果实现了。
而IE7和firefox,没有变化。
2)再在div里写入"line-height:300px;vertical-align:middle",发现IE7这时候也有效果了。
但firefox图片还没垂直居中。
(这里的"line-height:300px"是根据div的高度确定的。)
3)再对div增加样式:"display:table-cell",现在看看firefox也好了。
举例代码:
< 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_r(( 300 - this.height ) / 2);” />
< /div >
2、要想使图片居中,多数人可能会考虑使用"vertical-align:middle"代码。这样加上后发现却没有出现效果。
IE、firefox浏览器的逐步解决方法:
1)针对图片设置如下代码:style="_margin-top: expression_r(( 300 - this.height ) / 2)";发现在IE6下效果实现了。
而IE7和firefox,没有变化。
2)再在div里写入"line-height:300px;vertical-align:middle",发现IE7这时候也有效果了。
但firefox图片还没垂直居中。
(这里的"line-height:300px"是根据div的高度确定的。)
3)再对div增加样式:"display:table-cell",现在看看firefox也好了。
举例代码:
< 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_r(( 300 - this.height ) / 2);” />
< /div >