此特徵用在文字行（inline）元素與報表的小方格（cell），指定元素在父矩格中的垂直對齊方式。可設為：
- baseline：元素的基準線，與父矩格的基準線對齊。如果此元素沒有基準線，則以其底部對齊。此為預設值。
- 長度：元素矩格的基準線，與父矩格的基準線的距離。正值向上，負值向下。
- 百分比： line-height 乘上百分比，得出上面的基準線距離。
- top：元素矩格的頂線，與父元素的頂線對齊。
- middle：元素矩格的中線，與父矩格的基準線加 x-height/2 對齊。
- bottom：元素矩格的底線，與父元素的底線對齊。
- text-top：元素矩格的頂線，與父元素文字的頂線對齊。
- text-bottom：元素矩格的底線，與父元素文字的底線對齊。
- sub：設定下標字位置。
- super：設定上標字位置。
- inherit：繼承父元素的特徵值。
實際測試，不同瀏覽器展現的結果會有差異。
測試基準線對齊。
- 風格用法：
<style type='text/css'>
.vtc SPAN {display:inline-block;
width:100px;
height:60px;
background:#733;
}
</style>
<div class=vtc>
vertical-align:<span style='vertical-align: baseline'>
</span>空元素沒有基準線，以其底部對齊。<br /><br />
vertical-align:<span style='vertical-align: baseline'>
baseline</span><br /><br />
vertical-align:<span style='vertical-align: 20px'>
20px</span>
vertical-align:<span style='vertical-align: -20px'>
-20px</span><br /><br />
vertical-align:<span style='vertical-align: 80%'>
80%</span><br /><br />
vertical-align:<span style='vertical-align: -80%' id='lh'>
-80%</span>
</div>
<script type='text/javascript'>
document.write( document.getElementById('lh').style.verticalAlign );
</script> - 執行結果：
vertical-align: 空元素沒有基準線，以其底部對齊。-80%
vertical-align: baseline
vertical-align: 20px vertical-align: -20px
vertical-align: 80%
vertical-align: -80%
- 上例中，IE6 的基準線是矩格的底部；Firefox, Safari, Chrome 是矩格內的文字行之底部為基準線。
- 百分比在 IE6, Firefox 是乘上 line-height；在 Safari, Chrome 則是乘上矩格的高。
- 上例使用 style 物件 的特徵 verticalAlign 讀取特徵值。
| vertical-align（你正在看 第一頁） | : | 第一頁 | 第二頁 | 第三頁 | 第四頁 |
