Display: table-cell usage introduction, displaytable-cell

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.