CSS3 vertical-align

vertical-align

垂直高度设置,表格的专有属性。

<!-- 在表格中,水平居中可以使用通用的属性 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>

显示效果

水平居中 & 垂直居中
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程