完美兼容IE6，摆脱table用CSS实现图片垂直居中
还是昨天的单子。
制作中学到新的东西。
看上图，对于这样的一个图片列表，如果需要采用容器内部图像能水平居中，很简单，大家都知道用 text-align: center
然后如果需要垂直居中呢？
我先前的做法是在那个LI里套一个固定宽高的table，利用td的垂直居中属性完成图片的垂直居中。
然而这种方法显然是非常不标准的。
于是前段时间在网上乱逛时学到一招：
#li_con {display:table-cell;text-align:center;vertical-align:middle;}
这样一来，在#li_con容器中的img标签就会垂直与水平居中了！！
==================悲惨分割线====================
别高兴太早了！看看你的IE6，可恶的IE6似乎不认识 display:table-cell; 所以更别提 vertical-align:middle;让图片垂直居中了！
怎么办呢？
回忆起淘宝似乎页面上有这样的图片，于是叫龙兄登录进去死命找，终于找到了一条针对IE6的hack：
淘宝的做法是：
#li_con a{
*font-size:135px;
}
也就是在图像的链接中设置一个字体大小，加上IE的hack星号就OK了，太神奇了！！
3 Comments
我要评论How to make the rollover image in the middle? please see: http://www.10-dollar-shop.com/index.php/Earrings/Three-Leaves-Pink-Beads/flypage.tpl.html Thanks.
Yea, that is the method I mentioned above.
Thank you for your reply... I tried that method, it only works on the first default image, the other rollover enlarged ...