display:table-cell的用法简介
2015-07-10 13:42
459 查看
display:table-cell的用法简介:
display属性的使用相当频繁,比如display:block或者display:inline等,但是对于display:table-cell可能比较陌生,因为此属性在特定的情况下会发挥很大的作用,下面就简单介绍它的作用,先看一段代码实例:
在以上代码中,尽管给父div添加了vertical-align:middle,但是子div还是不能够垂直居中。下面改造一下代码:
以上代码的表现可以看出,添加display:table-cell之后,子div在父div中实现了垂直居中效果,不过需要注意的是,在IE6和 IE7这样低版本的浏览器中无效。这里可以引出display:table-cell的作用,它可以指定对象作为表格单元格,类同于html标 签<td>,也就是说它可以使对象具有表格单元格的属性,所以在第二个实例中,添加了display:table-cell属性之后,div 就具有了valign属性,于是vertical-align:middle也就生效了。
display属性的使用相当频繁,比如display:block或者display:inline等,但是对于display:table-cell可能比较陌生,因为此属性在特定的情况下会发挥很大的作用,下面就简单介绍它的作用,先看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> .parent{ width:600px; height:600px; background-color:green; vertical-align:middle; } .children{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
在以上代码中,尽管给父div添加了vertical-align:middle,但是子div还是不能够垂直居中。下面改造一下代码:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> .parent{ width:600px; height:600px; background-color:green; display:table-cell; vertical-align:middle; } .children{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
以上代码的表现可以看出,添加display:table-cell之后,子div在父div中实现了垂直居中效果,不过需要注意的是,在IE6和 IE7这样低版本的浏览器中无效。这里可以引出display:table-cell的作用,它可以指定对象作为表格单元格,类同于html标 签<td>,也就是说它可以使对象具有表格单元格的属性,所以在第二个实例中,添加了display:table-cell属性之后,div 就具有了valign属性,于是vertical-align:middle也就生效了。
相关文章推荐
- 使用 Nginx 提升网站访问速度(转)
- setTimeout&&setInterval
- qt调用vlc响应windows消息
- yum与apt-get
- php往mysql中存储时“=”的问题
- 一个融资客的强平日记
- 支付宝担即时到帐批量退款接口(转)
- 导入模型和贴图的最佳实践
- 机器视觉开源处理库汇总(转)
- 为什么从svn上下载下来的项目不能被myeclipse编译
- 语音识别之梅尔频谱倒数MFCC(Mel Frequency Cepstrum Coefficient)
- 机器视觉开源处理库汇总(转)
- [LeetCode] Palindrome Linked List
- 2015年中国在线教育报告
- 简单入门HtmlUnit
- HDU 3280 Equal Sum Partitions(二分查找)
- 我对CONTAINING_RECORD宏的详细解释
- <c:forEach></c:forEach>下拉列表的显示
- 词性标记集--计算所汉语
- C语言中关于scanf函数的用法