注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

秦时明月

做好今天的事!

 
 
 

日志

 
 
 
 

如何让div里的图片垂直居中  

2014-06-26 17:04:39|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
给img的父级div,赋予属性{display: table-cell;vertical-align:middle;}。这样即可轻松实现垂直居中。(/*非IE的主流浏览器识别的垂直居中的方法*/  )(overflow:hidden;会无效)

如何让div里的图片垂直居中

在div中,可以像表格单元格一样运用水平居中属性。但是却无法像单元格一样运用垂直居中属性。
那么如何让div里的图片元素也能够在各种浏览器中实现垂直居中呢?

在firefox浏览器中,它的解决方案是:
给img的父级div,赋予属性{display: table-cell;vertical-align:middle;}。这样即可轻松实现垂直居中。

然而在ie中,情况却更为复杂。
由于display: table-cell;对IE不起作用,所以上面的方案对IE无效。要使得IE里的图片可以在父级div中垂直居中,需要给img嵌套多层div标签。方法如下:
<div style=" position:relative; width:300px; height:300px; border:1px solid #333;text-align:center">
<div style=" position:absolute; top:50%;">
<div style=" position:relative; top:-50%; left:-50%;">
<img src="url" >  <!-- 填充一张图片的url -->
</div>
</div>
</div>

最后,为了让IE和FF都能够读懂我们的代码,同时实现这两种主流浏览器中div里图片垂直居中,我们需要将两者相结合。最后的写法总结如下:
<div style=" position:relative; width:300px; height:300px; border:1px solid #333;display: table-cell;vertical-align:middle; text-align:center">
<div style="*position:absolute; top:50%;">
<div style="*position:relative; top:-50%; left:-50%;">
<img src="url" >  <!-- 填充一张图片的url -->
</div>
</div>
</div>


  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017