Introduction to the usage of display:table-cell_html/css

Introduction to the usage of display:table-cell_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:32

Original

1297 people have browsed it

Introduction to the usage of display:table-cell:
The display attribute is used quite frequently, such as display:block or display:inline, but display:table-cell may be unfamiliar because This attribute will play a great role in certain situations. Let’s briefly introduce its role. Let’s first look at a code example:

<!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>

Copy after login

In the above code, although Vertical-align:middle is added to the parent div, but the child div still cannot be vertically centered. Let’s modify the code:

<!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>

Copy after login

It can be seen from the performance of the above code that after adding display:table-cell, the child div achieves the vertical centering effect in the parent div, but it needs Note that it is not valid in lower version browsers such as IE6 and IE7. This can lead to the function of display:table-cell, which can specify the object as a table cell, similar to the html tag , that is to say, it can make the object have the attributes of a table cell, so in the second instance , after adding the display:table-cell attribute, the div has the valign attribute, so vertical-align:middle will take effect.

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/502.html