display:table-cell的用法简介:
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标签
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/502.html
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
750
收藏
