多行文字、大小不规则图片 垂直居中

<div class="zxx_align_box_2">

<span class="zxx_align_word">这里显示多行文字。</span>

</div>

.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; 
padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; 
vertical-align:middle;}
.zxx_align_box_2 span.zxx_align_word{display:inline-block; 
font-size:0.1em; vertical-align:middle;}

有几点简要说明：
1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；
2.外部div不能使用浮动；
3.外部div高度和文字大小比例1.14为宜；
4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；
5.系统原因，我没能够在IE8下测试。

------------------------------------------华丽分割线---------------------------------------

<ul class="zxx_align_box_6 fix">    

<li><img class="show_img" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />        <img class="alpha_img" src="../image/pixel.gif" />    

</li> 

</ul>

.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;} .zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;} .zxx_align_box_6 li .show_img{vertical-align:middle;}

      本文转自Ansue  51CTO博客，原文链接：http://blog.51cto.com/ansue/1625069，如需转载请自行联系原作者