看看关于table
的display
可选值:
table
:指定对象作为块元素级的表格,相当于html标签<table>
inline-table
:指定对象作为内联元素级的表格,相当于html标签<table>
table-caption
:指定对象作为表格标题,相当于html标签<caption>
table-cell
:指定对象作为表格单元格,相当于html标签<td>
table-row
:指定对象作为表格行,相当于html标签<tr>
table-row-group
:指定对象作为表格行组,相当于html标签<tbody>
table-column
:指定对象作为表格列,相当于html标签<col>
table-column-group
:指定对象作为表格列组显示,相当于html标签<colgroup>
table-header-group
:指定对象作为表格标题组,相当于html标签<thead>
table-footer-group
:指定对象作为表格脚注组,相当于html标签<tfoot>
display: table和table-cell的垂直居中布局
html:
<div class="parent">
<p class="son">会议认为,党的十八大以来,我国经济发展取得历史性成就、
发生历史性变革,为其他领域改革发展提供了重要物质条件。经济实力
再上新台阶,经济年均增长7.1%,成为世界经济增长的主要动力源和稳定器。
</p>
</div>
css:
.parent {
display: table;
width: 300px;
height: 300px;
text-align: center;
}
.son {
display: table-cell;
height: 200px;
background-color: yellow;
vertical-align: middle;
}
将容器设为display:table
让他成为一个块级表格元素,子元素display:table-cell
使子元素成为表格单元格,然后就像在表格里一样,给子元素加个vertical-align: middle
多行文字垂直居中啦!
display:table和display:table-cell的妙用
表格布局display: table的妙用