查看文章
 
[CSS]痛苦的图片垂直居中显示
2008-07-16 10:10

图片水平居中没什么技术含量,而垂直居中显然困扰了一大批CSS开发人员,原先我也只是粗粗知道通过设定line-hight和font-size可以让图片居中,曾经记得确实只要把line-height设为div的height就可以轻松实现了,可是这次却怎么也不行,估计记忆链路出现啥问题了吧。

相对比较好的解决方法如下:
div.hasimg{display:table-cell;*font-size:432px;vertical-align:middle;width:640px;height:480px;text-align:center;}
div.hasimg img{vertical-align:middle;}

display:table-cell;vertical-align:middle;两句其实就可以实现除IE外的浏览器的图片垂直居中了,然而该死的IE呢还很特殊的不支持table-cell,因此还要加上一句*font-size:432px来hack。关于这个432是怎么来的呢?有说是DIV高度*0.852,也有说是DIV高度*0.872,具体的算法曾经找到过现在却忘记掉了,不过经过实践证明在simsum(宋体)的环境下DIV高度*0.9是一个比较完美的比例。

PS1:table-cell在safari3下惨不忍睹,本来么也可以用css hack给蒙混过去,结果请见《该死的safari
PS2:如果懒得看上面的那些,其实也有很简单的解决办法如下:

<table><tr><td width=“640” height="480" align="center" valign="middle"></td></tr></table>


类别:看来有必要放一些学习手记||添加到搜藏 |分享到i贴吧|浏览(1106)|评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
     

   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu