css中display设置为table、table

http://www.cnblogs.com/lee90/p/6602478.html

html:

1、当设置display：table;时，table的padding设置会失效。【可自己测试一下】

.table {

        display: table;

        margin: 5px;

        width: 1000px;

        border:1px solid red;

    }

2、当设置display：table-row;时，margin和padding设置会失效。这里我进行了设置，可以看出是没有效果的。

3、当设置display：table-cell;时，margin设置会失效。这里我进行了设置，可以看出是没有效果的。

.cell {

        display: table-cell;

        padding: 10px;

        vertical-align: middle;/*定义行内元素垂直对齐*/

        height: 300px;

        border:1px solid green;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }

4、认识了上面的设置的作用和注意点以后，我们可以发现可以通过display:table-cell和vertical-align:middle;来进行垂直居中设置的,也是运用了cell时，vertical-align属性生效作用。

设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性。