display:table-cell的用法简介_html/css_WEB-ITnose
程序员文章站
2024-02-02 08:14:22
...
display:table-cell的用法简介:
display属性的使用相当频繁,比如display:block或者display:inline等,但是对于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标签
推荐阅读
-
display:table-cell的用法简介_html/css_WEB-ITnose
-
CSS3的calc()用法简单介绍_html/css_WEB-ITnose
-
CSS用法的一些总结_html/css_WEB-ITnose
-
CSS3的calc()用法简单介绍_html/css_WEB-ITnose
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
css3的基础用法,新手必看哈(还有css3和jquery动画的对比)_html/css_WEB-ITnose
-
web报表工具FineReport常用函数的用法总结(报表函数)_html/css_WEB-ITnose
-
display:none;与visibility:hidden;的区别_html/css_WEB-ITnose
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
CSS中!important的用法和在IE6下的表现_html/css_WEB-ITnose