接着浅析table-cell的简单应用

叁歲伎倆 2021-12-22 14:23 249阅读 0赞

上篇小写了下inline-block，这篇咱们聊聊table-cell

对我来说table-cell在一般情况下是用来做垂直居中的

html：

css：

.nav {
        
    　　width: 1200px;
    　　margin: 0px auto;
    　　overflow: hidden;
    　　border: 1px solid #cc0033;
    }
    .nav .list {
        
    　　overflow: hidden;
    }
    .nav .list .item {
        
    　　list-style: none;
    　　display: inline-block;
    　　text-align: center;
    　　border: 1px solid #040;
    　　*width: 200px;
    　　*display: inline;
    　　*zoom: 1;
    }

.nav .list .item .link {
           
    　　width: 200px;
    　　height: 100px;
    　　*line-height: 100px;
    　　display: table-cell;
    　　vertical-align: middle;
    　　border: 1px solid #0066cc;
    }

众所周知 display: table-cell; 配合 vertical-align: middle; 可以实现垂直居中，但在阳痿的IE中，低版本的IE并不支持table-cell，为了做到菜单内的文字或图片都可以保证垂直居中所以才加了好几层容器，nav和ul就不说了，li是为了划分区域，上一篇提过，所以用的inline-block，在这里要提一下，html标记加了table-cell属性以后会出现类似float:left; 的效果，且margin属性失效，因此给它在外面加了一层li标记，用li标记来划分好区域，而区域的大小则用a标记的 width 和 height 属性撑开(在奇葩的IE7中，这块貌似只能用内联元素才能达到垂直居中的效果，所以要在li标记里也加上宽度...这个很无奈诶.~~)。为了兼容低版本IE，所以需要把a标记的 line-height 设置为和 height 一致，这样基本上就所有浏览器都可以兼容了。

我勒个去，想说table-cell的，怎么变成说垂直居中了..

table-cell还有个特性就是在一个容器内，随着同级元素的增多，宽度会变成平均分配，而元素减少，table-cell的宽度会恢复成 width 的值。

转载于:https://www.cnblogs.com/chhhen123/p/3413155.html