如何利用display:table-cell实现垂直居中?

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

在网页布局中,我们经常会需要让图片或者文字垂直居中,实现垂直居中的方法也有很多种,今天就给大家介绍一下利用display:table-cell属性实现垂直居中的方法,下面我们看看具体内容。

首先我们来简单认识一下display:table-cell属性

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签,使用display:table-cell让大小不固定元素垂直居中。

接下来我们就来看display:table-cell实现垂直居中的具体示例:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Document</title> <style type="text/css">         .img{             display: table-cell;             vertical-align: middle;             text-align: center;             width: 200px;             height: 300px;             border: 1px solid lightgreen;             background-color: lightblue;         }         .text{             display: table-cell;             vertical-align: middle;             text-align: center;             width: 300px;             border: 1px solid lightgreen;             padding: 10px;              background-color: lightblue;         } </style> </head> <body> <div>         <div>             <img src="image/girl.jpg" width="80px" height="100px" alt="">         </div>         <div>             <p>5G云资源分享网在线免费教程 </p>         </div>     </div> </body> </html>

display:table-cell实现垂直居中效果如下:

如何利用display:table-cell实现垂直居中?

注意:1、IE6/7不支持display:table-cell属性;2、table-cell不支持margin属性(但支持padding),就很僵硬; 3、尽量不要和浮动/定位同时用,会破坏它的css属性。

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

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

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

壳先生 » 如何利用display:table-cell实现垂直居中?