图片与DIV相互垂直居中

哦有一天，看了搜狐设计中心的一个小技巧，总结如下：

如有一个DIV里面有内容，还有一个DIV里面有图片，想让这两个DIV的内容居中显示

代码如下：

#div1, #div2,img {display:table-cell; display: inline;  vertical-align:middle;}

<div id="div1">xxxxx</div>
<div id="div2"><img src="" width="100" height="100"/></div>

webkit模式

IE模式

 

如果是文字多的情况需要在样式中加入zoom:1。

代码如下：

#div1, #div2,img {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

<div id="div1">

xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>

</div>
<div id="div2"><img src="" width="100" height="100"/></div>

webkit模式

IE模式