如何让图片在div里左右居中,上下居中

如何让图片在div里左右居中,上下居中

  转载
 
 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 >

转载于:https://www.cnblogs.com/steven-snow/p/7541758.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值