display:table-cell的用法简介
摘要：display:table-cell的用法简介:display属性的使用相当频繁，比如display:block或者display:inline等，但是对于display:table-cell可能比较陌生，因为此属性在特定的情况下会发挥很大的作用，下面就简单介绍它的作用，先看一段代码实例:蚂蚁部落 ...
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标签<td>，也就是说它可以使对象具有表格单元格的属性，所以在第二个实例中，添加了display:table-cell属性之后，div就具有了valign属性，于是vertical-align:middle也就生效了。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢