HTML5表格垂直居中是非常常見的布局需求,下面介紹幾種實現方式。
方式一:
通過設置td的垂直對齊方式為middle來實現表格垂直居中。代碼如下:
<table> <tr> <td style="vertical-align: middle;">左側</td> <td>中間</td> <td>右側</td> </tr> </table>方式二: 通過設置td的高度和line-height相等,同時把垂直對齊方式設為middle,也可以實現表格垂直居中。代碼如下:
<table> <tr> <td style="height: 100px; line-height: 100px; vertical-align: middle;">左側</td> <td>中間</td> <td>右側</td> </tr> </table>方式三: 通過設置td里面的內容為一個table-cell元素,然后通過設置該元素的display為table-cell和vertical-align為middle,實現表格垂直居中。代碼如下:
<table> <tr> <td><div style="display: table-cell; vertical-align: middle;">左側</div></td> <td>中間</td> <td>右側</td> </tr> </table>以上是幾種實現HTML5表格垂直居中的方式,您可以根據實際需要選擇其中一種實現方案。