display:table-cell的强大功能

display:table-cell可以用来:

  • 图片垂直居中于元素
  • 等高布局
  • 自动平均划分元素,并在一行显示
/*图片垂直居中*/
/*父元素*/
{
  display:table-cell;
  vertical-align:middle;
}
/*子元素*/
{
  vertical-align:middle;
}
/*等高布局*/
<div>
      <div style="background-color:blue;display:table-cell;">
        我是蓝色块
      </div>
      <div style="background-color:yellow;display:table-cell;">
        我是黄色块
        我是黄色块
      </div>
</div>
/*自动平均划分元素*/
/*父元素*/
{
  display:table;
}
/*子元素*/
{
 display:table-cell;
}

如果本文对您有帮助,请给我点赞哦~ 谢谢~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容