图片水平垂直居中，兼容主流浏览器

  

如图，要达到所有的图片都要自适应在红色模块中

代码：

 

<dl>

<dt><a href="#"><img src="./images/pic/qq.gif" alt="" /><span class="span_box"></span></a></dt>

<dd>11111</dd>

</dl>

 

<dl>

<dt><a href="#"><img src="./images/pic/banner.jpg" alt="" /><span class="span_box"></span></a></dt>

<dd>22222</dd>

</dl>

 

<dl>

<dt><a href="#"><img src="./images/pic/prod_01.jpg" alt="" /><span class="span_box"></span></a></dt>

<dd>3333</dd>

</dl>

 

<dl>

<dt><a href="#"><img src="./images/pic/logo.gif" alt="" /><span class="span_box"></span></a></dt>

<dd>44444</dd>

</dl>

 

<dl>

<dt><a href="#"><img src="./images/pic/1.gif" alt="" /><span class="span_box"></span></a></dt>

<dd>55555</dd>

</dl>

 

<dl>

<dt><a href="#"><img src="./images/pic/contact.jpg" alt="" /><span class="span_box"></span></a></dt>

<dd>666666</dd>

</dl>

 

<dl>

<dt><a href="#"><img src="./images/pic/subcompany.jpg" alt="" /><span class="span_box"></span></a></dt>

<dd>77777</dd>

</dl>

 

<dl>

<dt><a href="#"><img src="./images/pic/body_bj.jpg" alt="" /><span class="span_box"></span></a></dt>

<dd>888888</dd>

</dl>

 

 

思路如下：

 

图片首先用text-align进行水平居中，这是我们最开始能想到的，然后呢想到vertical-align:middle; 但是因为vertical-align:middle; 是图片相对于文字，所以在图片用text-align进行水平居中之后，唯一剩下一个问题即是“如何处理垂直居中”

但是现在dt只放图片，并没有文字，这样vertical属性无法实现效果，所以我们就给它伪造一个能相对定位到的隐身空模块span, html如上面的代码，

css如下：

 

<style type="text/css">

 

body{ margin:0; padding:0;}

 

dl,dt,dd,img{ margin:0; padding:0;}

 

img{ border:0;}

 

dl{ float:left; width:135px; margin:0 0 0 30px; text-align:center; display:inline;}

dl dt{ width:133px; height:133px; border:1px solid #f00; overflow:hidden; position:relative;}

dl dd{ width:133px; line-height:20px;}

dl dt img{ vertical-align:middle; width:133px; height:auto;}

 

.span_box{ display:inline-block; *display:inline; *zoom:1; height:100%; width:1px; margin-left:-1px; vertical-align:middle;}

 

</style>

 

此案例所用到的代码和思路就是这样，但是大家明白定义的属性的作用吗？这是我google之后得到一些相关参考说明：

 

很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。

 

display:inline-block

简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下

 

在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：

1、display:-moz-inline-stack

"当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative还hack掉这个bug"--乌龙茶

2、display:-moz-inline-box

使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决

所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack

 

在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：

 

1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：

div {display:inline-block;}

div {display:inline;}

 

2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：

div {display:inline; zoom:1;}

 

那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的 inline-block 属性）：

 

display:inline-block; 一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下触发IE下inline 元素的 hasLayout

 

display:-moz-inline-stack;  Firefox 的私有属性，需要时还必须用到position:relative解决上面提到的bug 

 

zoom:1;  同样是IE 下触发 hasLayout

*display:inline;  一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似

 

 

扩展一下一些其他可能用到的属性

text-indent:-9999px;

*text-indent:0;

font-size:0;

line-height:0;   如需隐藏文字，可用这四个属性

另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0;

 

overflow:hidden;   隐藏溢出的内容 

 

vertical-align:middle;    行内垂直居中，针对 Opera 比较大的偏离 

 

width:？px;    ？为任意非auto值

height:？px;   ？为任意非auto值

转自：http://blog.163.com/tutu_1107/blog/static/135785231201102810581582/