布局神器table

用法

  • 设置在父元素上的属性
    display: table;
  • 设置在子元素上的属性
    display: table-cell;

table特色

  • 对宽度高度敏感
  • margin值无效
  • 等高(可实现等高布局)
  • 可以使用传统表格样式,如table-layout
兼容IE8, 对于IE6/7,咱们可使用display: inline-block属性代替
.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;     //可调整子元素的对齐方式
}
相关文章
相关标签/搜索