Introduction to Display:table-cell Usage:
Display properties are used fairly frequently, such as Display:block or display:inline, but may be unfamiliar to Display:table-cell, because this property plays a big role in certain situations, Here is a brief introduction to its role, first look at a code example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css">. Parent{width:600px;Height:600px;Background-color:Green;vertical-align:Middle;}. Children{width:100px;Height:100px;Background-color:Red;}</style></Head><Body><Divclass= "Parent"> <Divclass= "Children"></Div></Div></Body></HTML>
In the above code, although Vertical-align:middle is added to the parent Div, the sub-div cannot be vertically centered. Change the code below:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "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><Divclass= "Parent"> <Divclass= "Children"></Div></Div></Body></HTML>
The above code shows that, after adding Display:table-cell, the sub-div has a vertical centering effect in the parent Div, but it is important to note that the IE6 and IE7 are not valid in the lower version of the browser. This can lead to the role of Display:table-cell, which can specify the object as a table cell, similar to the HTML tag <td>, that is, it can make the object has the properties of the table cell, so in the second instance, the display is added: After the Table-cell attribute, the DIV has the valign attribute, so the vertical-align:middle takes effect.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/502.html
Introduction to the usage of Display:table-cell
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
