CSS Hack-处理“未知图片垂直居中”的CSS样式

CSS Hack-分享以及推荐一种处理“未知图片垂直居中”的CSS样式

在介绍这种新的hack之前，先回顾一下我曾经用过的一个css hack，目的当然同样是对未知高度的图片进行垂直居中处理。

方法一，用一个庸余标签协助实现垂直居中

<div class="box-c"><img src="images/pic170x133.gif" alt="" /><span class="box-c-fix"></span ></div>

 

#imgDemo1 .box-c{height:300px;text-align:center;}
#imgDemo1 .box-c img{display:inline;vertical-align:middle;}
#imgDemo1 .box-c-fix{display:-moz-inline-box!important;display:inline-block;vertical-align:middle;height:100%;}

 

 

这种方式需要增加一个庸余的空标签span.box-c-fix，另外试试将span换成块元素div，是不是居中实效？没办法ie就是这么傻叉。。。

友情提示：img和span.box-c-fix之间最好不要有文字或者空格，否则ie下可能出现居中失效。

方法二，新的hack，推荐大家测试使用

 

<div class="box-c"><img src="images/pic170x133.gif"alt="" /></div>

 

/* 垂直居中-*font-size需根据具体高度算 */

.box-c{

    /* 非ie的主流浏览器识别的垂直居中 */

    display: table-cell;

    vertical-align:middle;

    /* 设置水平居中 */

    text-align:center;

    /* 针对恶心的IE的HACK */

    *display: block;

    *font-size: 148.41px;    /* 神的hack,人类目前无法解释。约为高度的0.873~0.877,如170*0.873=148.41 */

    *font-family:Arial;      /* 防止非utf-8引起的hack失效问题,如gbk编码 */

    /* 高宽 */

    width:170px;

    height:170px;

}

.box-c img {

    /* 设置图片垂直居中 */

    vertical-align:middle;

    /* 注:block会破坏居中,另外请防止别的样式覆盖 */

    display:inline-block;/* inline也行 */

}

 

 

这个样式传说来源于淘宝UI团队，经网上不少用户精简优化后得来。相对于之前流行的用一个庸余标签实现居中的方式有所改进。

另外需要注意的是，页面的编码会影响这个垂直居中的hack。建议页面和css文件采用相同的编码方式，例如都用utf-8编码。否则可能会出现居中失效。

 

经实际测试，主流浏览器和非主流IE均支持良好。 

 

测试浏览器：

Ie6~ie8

Safari5

Opera 11

Chrome 7

Firefox 3.6

搜狗2.0

 

示例demo在哪里？

未知高度图片垂直居中的方法除了上面两种，我所熟悉的还有第三种，有兴趣的可以看下我整理的demo，

 

http://www.vivasky.com/labs/jqfocus/css_verticalAlign.html