lineheight使图片多行文字垂直居中

Author Avatar
Peipei Wong 6月 27, 2016
  • 在其它设备中阅读本文章

多行文字垂直居中

<p class="mulit_line" style="width: 500px">
    <span style="font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum beatae officiis doloribus culpa et autem velit voluptatem quidem non, tempora, pariatur veritatis quaerat. Iste nisi nemo omnis, repellendus facilis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum beatae officiis doloribus culpa et autem velit voluptatem quidem non, tempora, pariatur veritatis quaerat. Iste nisi nemo omnis, repellendus facilis.
    </span>
    <i>&nbsp;</i>
 </p>
.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}
.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}
<ul class="zxx_ul_image">
  <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></li>
  <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></li>
  <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" /></li>
  <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" /></li>
  <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" /></li>
  <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" /></li>
</ul>

```css
.zxx_ul_image{overflow:hidden; zoom:1;}
.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}

转载而来。。。