Home > Article > Web Front-end > Introduction to the usage of display:table-cell_html/css_WEB-ITnose
Introduction to the usage of display:table-cell_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:321275browse
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> 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> 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 b6c5a531a458a2e790c1fd6421739d1c, 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