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

最新推荐文章于 2024-09-05 06:54:15 发布

转载最新推荐文章于 2024-09-05 06:54:15 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dubaokun/p/3411495.html

本文介绍如何利用 CSS 的 display:table-cell 属性来实现元素间的等高布局及内容的垂直居中显示。通过实际代码示例展示了该属性如何使元素如同表格单元格一样进行布局，并保持内容在垂直方向上的居中。

将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>