博客园首页新随笔联系管理订阅订阅随笔- 34 文章- 0 评论- 0 css中display设置为table、table-row、table-cell后的作用及其注意点

 html:

 

<div class="table">
    <div class="row">
        <div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
    </div>
</div>

 

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

 

 

.table {
        display: table;
        margin: 5px;
        width: 1000px;
        border:1px solid red;

    }

 

 

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

 .row {
       display: table-row;
       padding:100px;
       margin:100px;
}

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属性生效作用。

 

 转载：https://www.cnblogs.com/lee90/p/6602478.html