測試 TABLE。在 Firefox, Safari, Chrome 中，長度, 百分比, sub, super, text-top, text-bottom 是對齊基準線。在 IE6中，長度, 百分比, sub, super 會置中；text-top, text-bottom 則有效果。
- 風格用法：
<style type='text/css'>
.vtc TR {width:100px;
height:60px;
background:#733;
}
</style>
<table class=vtc>
<tr><td>vertical-align:
<td style='vertical-align: baseline'>baseline
<td style='vertical-align: 20px'>20px
<td style='vertical-align: 80%'>80%
<td style='vertical-align: sub'>sub
<td style='vertical-align: super'>super
<tr><td>vertical-align:
<td style='vertical-align: top'>top
<td style='vertical-align: middle'>middle
<td style='vertical-align: bottom'>bottom
<td style='vertical-align: text-top'>text-top
<td style='vertical-align: text-bottom'>text-bottom
</table> - 執行結果：
vertical-align: baseline 20px 80% sub super vertical-align: top middle bottom text-top text-bottom
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {display:inline-block;
width:140px;
height:100px;
background:#733;
vertical-align:middle;
}
.hvr:hover {vertical-align:top;}
.hvr:active {vertical-align:bottom;}
</style>
好玩遊戲：<span class=hvr>射擊遊戲, 賽車遊戲, 小遊戲.</span> - 執行結果： 好玩遊戲：射擊遊戲, 賽車遊戲, 小遊戲.
javascript 應用。可以用 style 物件 的特徵 verticalAlign 作動態變化。此範例使用到 toggleCSS()。
- 風格用法：
<div style='height:150px'>
射擊遊戲, 好玩遊戲,
<img id='test' width='100px'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' />
益智遊戲, 賽車遊戲.
</div>
<script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test", "verticalAlign", "text-top", "text-bottom", 1000);
</script> - 執行結果：射擊遊戲, 好玩遊戲,
益智遊戲, 賽車遊戲.
| vertical-align（你正在看 第四頁） | : | 第一頁 | 第二頁 | 第三頁 | 第四頁 |
