垂直高度设置,表格的专有属性。
<!-- 在表格中,水平居中可以使用通用的属性 text-align | left center right -->
<!-- 而垂直居中有专属的属性 vertical-align | top middle bottom -->
<table border="1" style="width:100px; height:100px; text-align:center; vertical-align:middle;">
<tr><td>水平居中 & 垂直居中</td></tr>
</table>
显示效果
水平居中 & 垂直居中 |
在普通的容器中,例如div
,使用vertical-align
设置垂直居中是无效的,通常的做法是用边距
,或者行高
设置。
<!-- 由于高度 100px,设置了行高为 100px,内容就变向的垂直居中 -->
<div style="height:100px; background:#eee; text-align:center;line-height:100px;">水平居中 & 垂直居中</div>
显示效果