Display:table-cell attribute exercise

display:table-cell attribute means that the label element is presented in the form of a table cell, similar to the td label. Currently, IE8+ and other modern browsers support this attribute, but IE6/7 can only say sorry to you. This fact also greatly restricts the application of the display:table-cell attribute in actual projects.

We all know that cells have some special attributes, such as vertical center alignment of elements, associated scaling, etc., so display:table-cell still has a lot of potential value. Although IE6/7 does not support this attribute, But fortunately, due to some messy properties and rendering of IE6/7, we can achieve the same or similar effects in other ways.

Similar to some other display attributes, table-cell will also be destroyed by other CSS attributes, such as float, position:absolute. Therefore, when using display:table-cell and float:left or position:absolute attributes, try not to use them together. . Elements with display:table-cell set are highly sensitive to width, unresponsive to margin values, and responsive to padding attributes. They are basically just like a td tag element.

The

vertical-align attribute defines the vertical alignment of the baseline of an inline element relative to the baseline of the line in which the element is located. Allows specifying negative length values ​​and percentage values. This lowers the element instead of raising it. In table cells, this property sets the alignment of the cell contents in the cell box.

​​​/*Set horizontal centering*/

                                                  text-align:center;
                  /* Hack for IE */
                                         *font-family:Arial;/*Prevent The problem of hack failure caused by non-UTF-8, such as GBK encoding*/
width: 200px;
height: 200px;
border: 1px solid #eee; vertical-align:middle;
        }