多行文字垂直居中显示，图片居中

单行文本垂直居中大家都会line-height~，那么多行呢？这个问题困扰的你是如何解决的~今天介绍一个属性专门解决多行垂直居中和大小不同的图片垂直居中

先介绍下概念东西：display:table-cell ：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）兼容IE8+  ;

　                                                  在ie6 和ie7不识别table-cell用inline-block处理即可~ 高度跟文字大小有关一般是高度=文字*1.14;

文字居中：把文字看成图片垂直居中就好用到属性vertical-align：middle；

div{display:table-cell; width:550px; height: 80px;border:4px solid #beceeb; *font-size:70px; vertical-align:middle; overflow: hidden;}
span{ display:inline-block; font-size:12px; vertical-align:middle;  padding:0 10px; }

<div>
    <span>帅呆了丰盛的会计法卡死了讲述了进富士康的飞机的空间富士康的了飞机上的看法坚实的两款副驾驶的两款副驾驶的路口附近法坚实的两款副驾驶的两款副驾驶的路口附近法坚实的两款副驾驶的两款副驾驶的路口附近</span>
</div>

 

 

图片居中：

对于图片大小不同居中的问题，困扰好久~之前都会多添加很多样式去适应，今天学到一个新方法~

.box ul li { float: left; margin-right: 13px;}    
.box ul li div { display: table-cell; width: 144px; height: 144px; border:1px solid red; *font-size: 125px; text-align: center; vertical-align: middle; overflow: hidden;}
.box ul li div img { vertical-align: middle; }

<div class="box">
　　<ul>
　　　　<li><div><img src="img.jpg" /></div></li>
　　　　<li><div><img src="img1.jpg" /></div></li>
　　　　<li><div><img src="img2.jpg" /></div></li>
　　　　<li><div><img src="mo.png" /></div></li>
　　</ul>
</div>

 

很多很好用样式因为浏览器不兼容可能被我们忽略了，很多时候可能你运用起来会发现可以针对低版本浏览器进行不同弄处理达到效果~

只要动手，就能发现不同的视角~~~~~