display——table-cell属性

display of the table and table-cell with very little under normal circumstances, so few people to pay attention to it, but the two of them teamed up and will give you a surprise!

When two or more labels using the display together in the same row, previously used a float, position the layout, you can use flex in high version of the browser, grid layout. Stumbled use display: table-cell is a good use of adaptive layout, paper display: table-cell to make learning summary.

display: table-cell element refers to a label is presented in the form of a table cell, so that similar elements td tag. IE8 + and modern versions of browsers support this property, IE6 / 7 does not support (available for other ways to achieve a similar effect). Similarly, display: table-cell property is also float, position: absolute attributes such destructive effect , should avoid using.

value	description
none	This element will not be displayed.
block	This element will be displayed as a block-level element, with a line break before and after this element will.
inline	default. This element will be displayed as inline elements, before and after the element has no line breaks.
inline-block	Inline block elements. (CSS2.1 added value)
list-item	This element will be displayed as a list.
run-in	This element is shown as the block-level elements or inline elements according to the context.
compact	CSS added value compact, but due to the lack of broad support, has been removed from the CSS2.1.
marker	CSS added value marker, but due to the lack of broad support, has been removed from the CSS2.1.
table	This element will be displayed as a block-level table (similar to the <table>), with a line break before and after the table.
inline-table	This element will be displayed as an inline table (similar to the <table>), no line breaks after a table.
table-row-group	This element or as a group to display a plurality of rows (similar to <tbody>).
table-header-group	This element or as a group to display a plurality of rows (similar to <thead>).
table-footer-group	This element packet as one or more lines to display (similar to <tfoot>).
table-row	This element will be displayed as a table row (similar to the <tr>).
table-column-group	This element or as a plurality of columns packets display (similar to <colgroup>).
table-column	This element as a display cell in the column (similar to <col>)
table-cell	This element will be displayed as a table cell (similar to the <td> and <th>)
table-caption	This element will be displayed as a table header (similar to <caption>)
inherit	Provision should inherit the value of the display property from the parent element.

Here thrown such a problem, as follows, so that the block in the multi-line text vertically centered? When it comes to think of a vertically centered, single-line text vertical center line-height equal to the height; block element vertically centered, position or flex positioning layout. But here I introduce display: table and table-cell how to make a multi-line text vertically centered. Although the feeling is not much use, but in some cases quite useful, as follows:

1. multi-line text centered

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .parent{
            display: table;
            width: 500px;
            height: 500px;
            text-align: center;
            border:1px solid red;
            margin:0 auto;
            background: blue;   /*背景颜色无效*/
        } 
        .Child { 
            the display : Table-Cell ;     / * child cell element becomes a table (similar to the <td> and <TH>) * / 
            height : 200px ; 
            background : Yellow ; 
            Vertical-align = left : Middle ; / * table container may be provided vertical alignment attribute * / 
        } 
    </ style> 
</ head> 
<body> 
    <div class = "parent"> 
        <div class = "Child"> 
            the display: Table-Row-Group; 
            the display: Table-header-Group;  
            the display :table-footer-group;
            the display :table-row;
            display: table-cell;
            display: table-column-group;
            display: table-column;
            display: table-caption;
            display: ruby-base;
            display: ruby-text;
            display: ruby-base-container;
            display: ruby-text-container;
        </div>
    </div>
</body>
</html>

Setting the display: table-cell elements:

Width highly sensitive
No response margin value
In response padding properties
Automatically when the content of the parent element of distraction overflow

display——table-cell属性

Guess you like