CSS vertical-align 屬性

CSS vertical-align 屬性的功能是用來設計文字中穿插的圖片，在垂直方向的對齊模式，有的時候我們會在一段文字中插入幾張小圖片，這些圖片可以讓整篇文章看起來更活潑、更生動，可是預設的圖片垂直排列模式在各大瀏覽器的效果幾乎都不是很好看，網頁設計師可以透過 CSS vertical-align 屬性來調整這些插入的圖片在垂直方向的排列，可以靠上對齊、置中對齊，當然也可以靠下對齊，實際上，CSS vertical-align 屬性可以調整網頁中所有的圖片，不僅僅只是文章中插入的小圖片，應用範圍相當廣泛。

CSS vertical-align 屬性的語法
vertical-align: 圖片對齊參數;
CSS 設計師只需要透過 vertical-align 屬性唯一的參數，就可以調整出圖片的靠上對齊、置中對齊或是靠下對齊的效果，我們這裡準備了 vertical-align 屬性常用的幾種參數值以及實際效果說明給各位讀者參考。

CSS vertical-align 屬性可用參數整理
語法說明
vertical-align:baseline;預設值，元素在該行的基礎線上，通常都不太好看。
vertical-align:sub;讓圖片垂直對齊該行本文的下標位置。
vertical-align:super;讓圖片垂直對齊該行本文的上標位置。
vertical-align:top;讓圖片垂直對齊該行元素的最高位置。
vertical-align:text-top;讓圖片垂直對齊該行文字的最高位置。
vertical-align:middle;讓圖片垂直對齊該行文字的置中位置。
vertical-align:bottom;讓圖片垂直對齊該行元素的最低位置。
vertical-align:text-bottom;讓圖片垂直對齊該行文字的最低位置。
vertical-align:%;用百分比來調整圖片垂直對齊該行文字的比例，可以有負值。

CSS vertical-align 屬性的實際操作範例
<style type="text/css">
#VA1{
    vertical-align:text-top;
}
#VA2{
    vertical-align:middle;
}
#VA3{
    vertical-align:text-bottom;
}
#SeperationLine{
    height:1px;
    border-top:1px #ccc dashed;
    margin:10px 0px;
}
</style>
這張圖 vertical-align 設為 text-top<img id="VA1" src="圖片網址">這張圖 vertical-align 設為 text-top
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 middle<img id="VA2" src="圖片網址">這張圖 vertical-align 設為 middle
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 bottom<img id="VA3" src="圖片網址">這張圖 vertical-align 設為 bottom
範例的視覺效果
這張圖 vertical-align 設為 text-top這張圖 vertical-align 設為 text-top
這張圖 vertical-align 設為 middle這張圖 vertical-align 設為 middle
這張圖 vertical-align 設為 bottom這張圖 vertical-align 設為 bottom
為了可以讓各位看清楚 vertical-align 屬性調整過後的圖片對對齊效果，我們在範例中準備了三個不同的字串，其中插入相同的小圖片，再透過 vertical-align 屬性不同的參數值，調整出各種垂直方向的對齊效果。

許多人誤會 vertical-align 屬性的功能，以為是用來調整文字垂直置中，其實並不是，如果你要尋找的是在 DIV 區塊內調整文字垂直置中的方法，請參閱這篇《CSS DIV 區塊內的文字垂直置中》的詳細介紹。

延伸閱讀
© Copyright webtech.tw Since 2010