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