18910140161

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

顺晟科技

2022-09-14 10:51:11

66

将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

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

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航