css中display:table和display:table-cell的合用的妙处

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍css中display:table和display:table-cell的合用的妙处 。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜!

这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到,单行文字垂直居中line-height等于height;块级元素垂直居中,position定位或者flex布局。但这里我介绍display:table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多,但是在某些时候还是挺管用的,如下

css中display:table和display:table-cell的合用的妙处

直接上代码:

html:

    <p class="parent">         <p class="son">会议认为,党的十八大以来,我国经济发展取得历史性成就、                      发生历史性变革,为其他领域改革发展提供了重要物质条件。经济实力                      再上新台阶,经济年均增长7.1%,成为世界经济增长的主要动力源和稳定器。         </p>     </p>

css:

       .parent {            display: table;            width: 300px;            height: 300px;            text-align: center;        }        .son  {            display: table-cell;            height: 200px;            background-color: yellow;            vertical-align: middle;        }

看完代码是不是瞬间明白了,这里我们只需要将容器设为display:table然他成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,然后就像在表格里一样,给子元素加个vertical-align: middle就行了,多行文字垂直居中啦。是不是很直接很简洁~

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css中display:table和display:table-cell的合用的妙处

发表评论

提供最优质的资源集合

立即查看 了解详情