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

左岸

web前端

 
 
 

日志

 
 

未知高度的图片垂直居中  

2012-07-06 13:53:03|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
方法一:

该方法是将外部容器的显示模式设置成display:table-cell,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。


HTML结构部分:
<div id="box"><span><img src="images/demo.jpg" alt="" /></span></div>  

CSS样式部分:
#box{   width:500px;          height:400px;   overflow:hidden;   position:relative;   display:table-cell;   text-align:center;   vertical-align:middle;  }  #box span{   position:static;   *position:absolute; /*针对IE6/7的Hack*/   top:50%; /*针对IE6/7的Hack*/  }  #box img {   position:static;   *position:relative; /*针对IE6/7的Hack*/   top:-50%;left:-50%; /*针对IE6/7的Hack*/  }  

方法二:

标准浏览器还是将外部容器的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法。


HTML结构部分:
<div id="box">  <i></i><img src="images/demo.jpg" alt="" />  </div>  

CSS样式部分:
#box{  width:500px;height:400px;  display:table-cell;  text-align:center;  vertical-align:middle;  }  #box i {   *display:inline-block;   *height:100%;   *vertical-align:middle   }  #box img {   vertical-align:middle   }  

方法三:

该方法针对IE6/IE7,将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中,标准浏览器还是使用上面的方法来实现兼容,并且结构也是比较优雅。


HTML结构部分:
<div id="box">  <img src="images/demo.jpg" alt="" />  </div>  

CSS样式部分:
#box{   width:500px;height:400px;   text-align:center;   /* 兼容标准浏览器 */   display: table-cell;         vertical-align:middle;   /* 兼容IE6/IE7 */   *display:block;   *font-size:349px;  /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */   *font-family:Arial;  /* 防止非utf-8引起的hack失效问题,如gbk编码 */  }  #box img{   vertical-align:middle;  }  
  评论这张
 
阅读(311)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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