HTML部分（仅示例一张图片，其他重复，故略）：
复制代码
<ul class=”zxx_align_box_3 fix”>
<li>
<img src=”../image/pixel.gif” style=”background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);” />
</li>
</ul>
css部分：
复制代码
.zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;}
.zxx_align_box_3 li img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}
② display:table-cell和文字大小控制居中
据说这个方法是淘宝的工程师想到的，确实是不错的方法！但是下面展示的却不是原版，而是我的修改版，去掉了没有必要的hack。
HTML部分（仅示例一张图片，其他重复，故略）：
复制代码
<ul class=”zxx_align_box_4 fix”>
<li>
<div><img src=”http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg” /></div>
</li>
</ul>
css部分：
复制代码
.zxx_align_box_4 li{float:left; margin-right:13px;}
.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}
.zxx_align_box_4 li div img{vertical-align:middle;}
需要说明的：
1.原版的代码中有两个hack，一个是针对文字大小的，另外一个是针对block属性的；后经过我测试推敲后证实这两个hack都是多余的，而*display:block更是多余，因为IE6,IE7根本就不认识display:table-cell是谁！
2.这个通过文字大小控制IE下图片垂直居中是个很不错的方法，要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于：不支持img外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！
3.高度：文字大小=1.14，这个比例我一直记着，但是后来我将这个比例的概念淡化了，原因在于多次遇到其他比例实现效果的情况。例如上面，就是1:1实现的。
4.这个方法巧妙的应用了IE默认文字空间的概念，然而这个默认文字空间是看不见，摸不着的，较抽象，不好理解，使用者多记住用法，深层次原因不太理解，不易上手。但是，这里我要转折一下，我想到了一种方法，将抽象默认文字空间的概念具体出来，实现了更加容易理解，更加方便使用，更加利于维护的新方法，这就是最后一种方法。
