前端小坑小坑css篇-div图片垂直居中

小坑1：div中图片垂直居中问题

该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，

并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，
当然这只是在标准浏览器下，IE6/IE7还得使用定位。

大小不固定的图片、多行文字的水平垂直居中
② 多行文字
如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，
设置文字与图片相同的display属性（inline-block属性），
然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下，
外部div标签：

div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; 
color:#069; font-size:10em; vertical-align:middle;}
内部span标签：

span{display:inline-block; font-size:0.1em; vertical-align:middle;}

② 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;}


③ display:inline-block和文字大小控制居中
这是我自己想到的方法，代码相当简洁，是个成本很低，效果惊人的方法，
适用于多图显示的情况。只需要一层必须要的a标签就解决问题了！

HTML部分（仅示例两张图片，其他重复，故略）：
<div class="zxx_align_box_5 fix">
    <a href="#zhangxinxu">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
    </a>
    <a href="#zhangxinxu">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
    </a>
</div>
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就只有与空格对齐了。