Display: Table-cell applications

1. display: Table-cell attribute description

The display: Table-cell attribute indicates that the label element is displayed as a table cell, similar to the TD tag. Currently, IE8 + and other modern browsers support this attribute, but IE6/7 can only talk to you about sorry, which greatly restricts display: the table-cell attribute is used in the actual project.

Cells have some special attributes, such as vertical center alignment of elements and associated scaling. Therefore, the display: Table-cell has many potential application values, although IE6/7 does not support this attribute, fortunately, IE6/7 has messy attributes and rendering. We can implement the same or similar effects in other ways.

Similar to some other display attributes, table-cell is also damaged by some other CSS attributes, such as float and position: absolute. Therefore, when using display: Table-cell and float: left or position: absolute attribute should not be used in the same way. When the display: Table-cell element is set, it is highly sensitive to width and does not respond to the margin value. In response to the padding attribute, it is basically a live TD Tag Element.

2. display: vertical center between table-cell and non-fixed-size elements

Using display: Table-cell to vertically center unfixed elements is already a very old method for easy reading. Here we will demonstrate the code again:

/* The size here is set based on the upper limit of the height and width of the 128 pixel image */Div {display: Table-cell; width: 1em; Height: 1em; Border: 1px solid # beceeb; font-size: 144px; text-align: center; Vertical-align: middle;} Div IMG {vertical-align: middle ;}

The result is as follows:

Ii. display: Adaptive Layout of table-cell and two columns

The Avatar part uses the float attribute, the left float, IE8 +, Firefox, chrome, opera, and other modern browsers use the display: Table-cell attribute on the right, and the result is adaptive, simple code and amazing results.

For IE6/7 that does not know the display: Table-cell attribute, use the display: inline-block attribute instead of the display: Table-cell attribute!

For example:

In this pattern:

HTML code:

<Section class = "wom_nav"> <ul class = "wom_navul"> <li class = "curwom"> <a href = ""> handbags </a> </LI> <li> <a href = ""> men's bag </a> </LI> </ul> </section>

CSS code:

.womlist_ul{ width:96%; margin:0 auto;}.womlist_ul li{ float:left; width:22%; margin-right:4%; margin-bottom:5%; text-align:center;}.womlist_ul li:nth-child(4n){ margin-right:0;}.womlist_ul li img{ display:block; border:1px solid #ececec;}.womlist_ul li i{ display:block; margin-top:8px;}

This layout is very useful in HTML5 horizontal layout, which can reduce the increase of a floating attribute!

Display: Table-cell applications