改进的图片垂直居中对齐方法-CSDN博客

本文链接：https://blog.csdn.net/forest_fire/article/details/50943680

<style>
.box li{float:left; margin-right:13px;}
.box li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}
.box li div img{vertical-align:middle;}
</style>


<ul class="box">
    <li>
        <div><img src="img/mm1.jpg" /></div>
    </li>
	    <li>
        <div><img src="img/mm2.jpg" /></div>
    </li>
	    <li>
        <div><img src="img/mm3.jpg" /></div>
    </li>
	    <li>
        <div><img src="img/mm4.jpg" width="141" height="100" /></div>
    </li>
        <p>&nbsp;</p>
</ul>

1.原版的代码中有两个hack，一个是针对文字大小的，另外一个是针对block属性的；后经过我测试推敲后证实这两个hack都是多余的，而*display:block更是多余，因为IE6,IE7根本就不认识display:table-cell是谁！

2.这个通过文字大小控制IE下图片垂直居中是个很不错的方法，要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于：不支持img外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！

3.高度：文字大小=1.14，这个比例我一直记着，但是后来我将这个比例的概念淡化了，原因在于多次遇到其他比例实现效果的情况。例如上面，就是1:1实现的。

4.这个方法巧妙的应用了IE默认文字空间的概念，然而这个默认文字空间是看不见，摸不着的，较抽象，不好理解，使用者多记住用法，深层次原因不太理解，不易上手。但是，这里我要转折一下，我想到了一种方法，将抽象默认文字空间的概念具体出来，实现了更加容易理解，更加方便使用，更加利于维护的新方法，这就是最后一种方法。

③ display:inline-block和文字大小控制居中

这是我自己想到的方法，代码相当简洁，是个成本很低，效果惊人的方法，适用于多图显示的情况。只需要一层必须要的a标签就解决问题了！

③ display:inline-block和文字大小控制居中

这是我自己想到的方法，代码相当简洁，是个成本很低，效果惊人的方法，适用于多图显示的情况。只需要一层必须要的a标签就解决问题了！

HTML部分（仅示例两张图片，其他重复，故略）：

css部分：

.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;} .zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}

需要说明的：

1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，但是css代码多些:display:inline; display:inline-block先变成inline属性，再转变成inline-block属性，原因讲起来又是一篇长长的文章，放着。

2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了。

http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html