CSS 实现等高布局以及多行文本垂直居中

将display属性设置为table-cell，具有table的特点。

1.同行等高。

2.宽度自动调节。

相当于表格是td，

 

 

<style type="text/css">

    .classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align: top;}

    .classtd{display:table-cell; border-color:#cc0;}

</style>

<div class="classtd"><p>大人。<br />好好学习天天向上 做好技术，做好产品为人民服务<br />做好技术，做好产品为人民服务<br />做好技术，做好产品为人民服务<br />做好技术，做好产品为人民服务</p> </div> <div class="classtd"><p>我和左边等高
我和左边我
和左边等高等
高我和左边等高</p></div>

　　

大人。
好好学习天天向上 做好技术，做好产品为人民服务
做好技术，做好产品为人民服务
做好技术，做好产品为人民服务
做好技术，做好产品为人民服务

我和左边我
和左边等高等
高我和左边等高

如果要实现垂直居中的话 可以与 vertical-align：middle结合使用即可

<style type="text/css">

    .classtd{ display: table-cell; padding:10px;margin:10px;border:1px solid #ccc;}

    .classtd div{ display: inline-block; vertical-align: middle;}

</style>

<div class="classtd">

    <div style="width:100px;background: #639146; color:#fff;">垂直居中fsdfsd</div>

    <div style="width:100px;background: #2B82EE; color:#fff;">垂直居中qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div>
 <div style="width:100px;background: #F57900; color:#fff;">垂直居中qqqqqqqqqqq</div> <div style="width:100px;background: #BC1D49; color:#fff;">处置居中qqqqqqqqqqqq</div> </div>

垂直居中fsdfsd

垂直居中qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

垂直居中qqqqqqqqqqq

处置居中qqqqqqqqqqqq

 上面看出三个方块已经垂直居中了