总字数 657
预计阅读时间 2 分钟
table-cell
元素让该元素以表格单元格的形式呈现,类似于td标签
单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等
table-cell并不是必须和
table
父元素配套使用 , 但是通常习惯于这样做
table-cell会被某些css样式破坏 , 比如float 绝对定位
对width height padding
有反应 , 对margin
无反应
1 | .box { |
应用场景
多行文字垂直居中
单行文字的居中十分简单, line-height与父元素的高度相同即可
1 | .box { |
这里准确地说应该是文字或者全部为内联元素均在一行内
但是如果其中的文字可能有多行并且行数不确定 , 这种办法就不可行了
使用table-cell配合vertical-align: middle
就可以很方便做到
1 | <div class="box"> |
1 | .box > .child { |
当然水平居中和单行没什么差别 , 都是text-align:center
多列等高布局
对于多列布局 , 当然存在很多的实现方法
但是如果想要让所有列的高度适应于内容最高的一列的高度
源于表格当中 td 的特性
使用table-cell实现起来就更为方便
1 | <div class="box"> |
1 | .box { |
可以看到整体的高度适应于内容最高的右边一列
兼容性
table相关的布局方式在主流浏览器当中都是兼容的
|Chrome|Firefox (Gecko)|Internet Explorer|Opera|Safari (WebKit)|
|—|—|
|1.0 | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 (85) |