一、display:table-cell属性简述
display:table-cell
属性指让标签元素以表格单元格的形式呈现,类似于td
标签。table-cell
同样会被其他一些CSS属性破坏,例如float
, position:absolute
,所以,在使用display:table-cell
与float:left
或是position:absolute
属性尽量不用同用。
二、display:table-cell与大小不固定元素的垂直居中
div{display:table-cell; 1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
div img{vertical-align:middle;}
三、display:table-cell与两栏自适应布局
左侧为头像,右侧内容自适应。其中头像部分使用了float
属性,左浮动,右侧使用了display:table-cell
属性,结果就自适应了
四、display:table-cell下的等高布局
.list_row{display:table-row;}
.list_cell{display:table-cell;table-layout:fixed;30%; padding:1.6%; background-color:#f5f5f5;}