CSS 的vertical-align可以控制行內元素的對齊方式，「vertical」是垂直的意思，「align」則是對齊的意思，如置頂、置中或置底，除了行內元素（inline）之外也可以控制表格（table）的對齊方式。
如果要控制 div 的垂直對齊方式，請參考：CSS 區塊元素（div）垂直置中的方法。
範例
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: baseline;
vertical-align: sub;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: super;
CSS + HTML
<style>
.span{
vertical-align: super;
}
</style>
<p>這是一行 p 元素的文字: <span class="span">這是要控制垂直對齊的元素</span></p>
呈現結果
這是一行 p 元素的文字: 這是要控制垂直對齊的元素
要留意這只能控制行內元素（inline）或表單（table），如果是區塊元素（block）則無效。
<style>
.div{
vertical-align: super;
}
</style>
<p>這是一行 p 元素的文字: <div class="div">這是要控制垂直對齊的元素</div></p>
呈現結果
這是一行 p 元素的文字:
這是要控制垂直對齊的元素
↑ 因為是區塊元素因此換行了。
表格效果
| 這是一段很長的文字，為了讓句子長一點先說一點廢話在這裡，架站盒子是由一個路人寫的，網址kumo是雲還是蜘蛛只有站長自己知道，我想寫到這裡應該就差不多了，來看看右邊的範例位置吧。 | top | middle | bottom |
只要將td加上vertical-align就可以控制文字垂直對齊了。
屬性列表
除了top、bottom等關鍵值之外，也可以使用數值或百分比，以下列舉所有相關的值。
- vertical-align: top; // 元素頂部與整體頂部對齊
- vertical-align: middle; // 元素中部與父元素基線加上父元素高度的一半。
- vertical-align: bottom; // 元素底部與整體底部對齊
- vertical-align: baseline; // 元素基線與父元素基線對齊
- vertical-align: sub; // 元素基線與父元素的下標基線對齊
- vertical-align: super; // 元素基線與父元素的上標基線對齊
- vertical-align: text-top; // 元素頂部與父元素字體頂部對齊
- vertical-align: text-bottom; // 元素底部與父元素字體底部對齊
- vertical-align: 2em; // 元素基線對齊到父元素基線的指定長度，可為負數
- vertical-align: 10px; // 元素基線對齊到父元素基線的指定長度，可為負數
- vertical-align: 50%; // 元素基線對齊到父元素基線的百分比，可為負數
本文是否對您有幫助？