display:table-cell的妙用

一、大小不固定，多行文字的垂直居中

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

 

二、两栏自适应布局

<div >

    <img />

     <div style="display:table-cell; vertical-align:top;*display:inline-block;>这里显示多行文字。</div>

</div>

 

下面左中右三个33%的div:display:table-cell，用inline-block则有问题

 

更多妙用详见：https://www.zhangxinxu.com/wordpress/2010/10/我所知道的几种displaytable-cell的应用/

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