vertical-align 第一頁

vertical-align 1

此特徵用在文字行（inline）元素與報表的小方格（cell），指定元素在父矩格中的垂直對齊方式。可設為：

1. baseline：元素的基準線，與父矩格的基準線對齊。如果此元素沒有基準線，則以其底部對齊。此為預設值。
2. 長度：元素矩格的基準線，與父矩格的基準線的距離。正值向上，負值向下。
3. 百分比： line-height 乘上百分比，得出上面的基準線距離。
4. top：元素矩格的頂線，與父元素的頂線對齊。
5. middle：元素矩格的中線，與父矩格的基準線加 x-height/2 對齊。
6. bottom：元素矩格的底線，與父元素的底線對齊。
7. text-top：元素矩格的頂線，與父元素文字的頂線對齊。
8. text-bottom：元素矩格的底線，與父元素文字的底線對齊。
9. sub：設定下標字位置。
10. super：設定上標字位置。
11. 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>

• 上例中，IE6 的基準線是矩格的底部；Firefox, Safari, Chrome 是矩格內的文字行之底部為基準線。
• 百分比在 IE6, Firefox 是乘上 line-height；在 Safari, Chrome 則是乘上矩格的高。
• 上例使用 style 物件 的特徵 verticalAlign 讀取特徵值。

vertical-align（你正在看 第一頁）

:

第一頁

第二頁

第三頁

第四頁