display:table-cell的强大功能

2021-10-18  本文已影响0人  9月的甜橙子

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;
}

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

上一篇下一篇

猜你喜欢

热点阅读