1、table-cell加上display:inline
这种方法很神奇，前面我们说过用display-table和vertical-middle是在现代浏览器中实现图片垂直居中是最佳办法，只是IE6-7不支持display:table-cell，其实并不是那么严重，我们只要在IE6-7下给他来个另外的写法。其实掌握了原理在IE下实现起来也并不难，下面我们一起先来看看这个思路：
首先在图片的容器元素中设置“display:table-cell;vertical-align:middle;”实现现浏览器的垂直居中；
IE6-7有一个好的办法，就是创建一个线盒，此线盒的高度和图片容器的高度一样，并且给这个线盒也设置“vertical-align:middle”。
接下来的关键是给IE6-7创建线盒，还好IE6-7下部分显示支持“dipslay:inline-block”。这样我们就可以在图片的容器中创建一个空元素（比如说span），并且设置span的“display:inline-block;height:100%;vertical-align:middle”。
创建线盒中有一个细节需要注意，在IE6-7中空的line-block元素宽度为“0”，这样在IE6-7下是没有效果的，此时我们需要给span加上“width:1px”，此时会给水平居中造成1px的误差，但这种bug你是可以接受得了的。
那么最终解决方案就是使用display:table-cell和设置了display:inline-block的线合span。当然其中还是需要为IE写一点特殊的代码，接下来我们的起来看代码：
HTML Markup
XML/HTML Code复制内容到剪贴板
<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>
CSS Code
CSS Code复制内容到剪贴板
<style type="text/css">
.imgWrap li {
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
border-collapse: collapse;
