Display: table-cell usage introduction, displaytable-cell

Display: table-cell usage introduction, displaytable-cell

Usage of display: table-cell:
The display attribute is frequently used, such as display: block or display: inline, but it may be unfamiliar with display: table-cell, this attribute will play a major role in a specific situation. Next we will briefly introduce its role. Let's take a look at a code example:

<! DOCTYPE html> 
In the above Code, although vertical-align: middle is added to the parent div, the Child div cannot be vertically centered. The following code is transformed:
<! DOCTYPE html> 
The code above shows that after the display: table-cell is added, the sub-div achieves vertical center effect in the parent div, but note that, it is invalid in browsers of earlier versions such as IE6 and IE7. Display: table-cell can be used to specify an object as a table cell, similar to the html tag <td>. In other words, the object can have the attribute of a table cell, therefore, after the display: table-cell attribute is added to the second instance, div has the valign attribute, so vertical-align: middle takes effect.
Original address: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/502.html