What is displaytable? How to apply display:table-cell

When many people just come into contact with display, they don’t know what displaytable is and how to use display:table-cell. In fact, it is not difficult to use display:table-cell, as long as we understand the application of the properties of display:table-cell. Rules, then, how to apply display:table-cell? Let's explain how to apply display:table-cell.

1: The attributes of display:table-cell

The attributes of display:table-cell are very similar to the td tag, now Many browsers support the display:table-cell attribute. We all know that tables have some special attributes. Many times, we use vertical centering and associated scaling, so display:table-cell is of great use. , but compared with other display attributes, table-cell will also be destroyed by other CSS. It is generally recommended that when using display:table-cell, do not use the float attribute and try not to use it. display:table-cell is particularly sensitive to width. , and the margin value has no meaning.

2: Application of display:table-cell and non-fixed elements

When making web pages, we use display:table-cell to make elements with non-fixed sizes And vertically centered, the code is as follows:

/*这里的大小是根据高宽上限128像素图片设置的*/
div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}

The effect displayed in the browser is as follows:

3. Display:table-cell's automatic Adapt layout

On some large websites, such as the friendly dynamic list in Facebook, display:table-cell and two columns are used to adapt, as shown in the figure:

Four: List layout under display:table-cell

Under normal circumstances, we use floats for layout, but we use floats for layout. If so, you need to clear the floating effect. The list layout under display:table-cell refers to the horizontal layout.

Since table-cell is wrapped with independent labels, when repeat is output, two loops are performed, and the number of columns is fixed. For general simple styles, we will not use display: table-cell.

The above is about what is displaytable? Full explanation of how to apply display:table-cell. If you want to know more about CSS tutorial, please pay attention to php Chinese website.

The above is the detailed content of What is displaytable? How to apply display:table-cell. For more information, please follow other related articles on the PHP Chinese website!