CSS中有一個常用的樣式屬性valign（垂直對齊）可以控制元素在其父元素內的垂直定位。它有許多取值，如：top、middle、bottom等,下面我們就來一一介紹。

div {
width: 200px;
height: 200px;  
border: 1px solid #000000;
}
div p {
background-color: #dddddd;
padding: 10px;  
height: 50px;
}

第一個取值top表示將元素的頂部與父元素的頂部對齊。

<div>
<p style="vertical-align:top;">I am at the top.</p>
</div>

第二個取值middle表示將元素的中心與父元素的中心對齊。

<div>
<p style="vertical-align:middle;">I am in the middle.</p>
</div>

第三個取值bottom表示將元素的底部與父元素的底部對齊。

<div>
<p style="vertical-align:bottom;">I am at the bottom.</p>
</div>

值得注意的是，valign屬性只適用于table、td、th、col、colgroup、tr、thead、tfoot、tbody等表格相關標簽中，如果要在其他標簽中設置垂直對齊，可以使用display:table-cell來解決。

<div style="display: table; width:200px; height: 200px; border: 1px solid #000000;">
<p style="display: table-cell; vertical-align:middle; text-align: center;">I am in the middle.</p>
</div>

最后需要提醒的是，在使用valign屬性時，應當將其與text-top、text-bottom、baseline、middle等屬性相結合來設置完善的垂直顯示效果。