關于vertical-align，翻譯過來就是，垂直對齊。該屬性包含的屬性如下所示：
| 屬性名 | |
| 長度 | 通過距離升高（正值）或降低（負值）元素。 |
| 百分值 – % | 通過距離（相對于 |
| baseline | 預設。元素的基線與父元素的基線對齊。 |
| sub | 降低元素的基線到父元素合适的下标位置。 |
| super | 升高元素的基線到父元素合适的上标位置。 |
| top | 把對齊的子元素的頂端與line box頂端對齊。 |
| text-top | 把元素的頂端與父元素内容區域的頂端對齊。 |
| middle | 元素的中垂點與 父元素的基線加1/2父元素中字母x的高度 對齊。 |
| bottom | 把對齊的子元素的底端與line box底端對齊。 |
| text-bottom | 把元素的底端與父元素内容區域的底端對齊。 |
| inherit | 采用父元素相關屬性的相同的指定值。 |
在我用的時候，是在我使用表格的行合并以後，得到的一個區域，想要在這個區域中輸入内容，它會預設出現在區域的中間，而我想要使内容出現在本區域的最上方，如下圖所示：
沒有設定vertical-align值前：
設定#sidebar{
border-left: 1pt dotted #0033FF;
text-align: left;
padding: 0;
vertical-align:top;
}以後結果：
至于其他的屬性具體是什麼效果，在這裡提供一個大神設計的測試網頁面闆，可以進去看看，秒懂。
http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html