Heim > Artikel > Web-Frontend > display:table-cell的用法简介_html/css_WEB-ITnose
display:table-cell的用法简介_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:321274Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：让360浏览器使用特定的模式打开网页（HTML）_html/css_WEB-ITnoseNächster Artikel：对IE浏览器写css hack_html/css_WEB-ITnose