CSS vertical-align 屬性

CSS vertical-align 屬性的功能可以用來設計網頁中圖片在垂直方向的對齊方式，以往在網頁內容中若是有插入圖片，預設效果可能不太美觀，也許圖片與文字難以對齊，網頁設計師可以透過 CSS 的 vertical-align 來處理，無論是要讓圖片靠上對齊、置中對齊還是要靠下對齊都可以做到，而且目前新版的主流瀏覽器都支援 vertical-align 屬性的效果。

另外，也許有些讀者會誤以為 vertical-align 屬性是用來處理一般文字的垂直置中效果，其實 vertical-align 的用途是用來設計圖片垂直方向的對齊，並非用來設計文字的對齊，若您在尋找的文字垂直對齊的解決方案，請參閱《CSS 文字垂直置中技巧》篇幅的介紹。

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:%;	以百分比來讓圖片垂直對齊該行文字，可以有負值。

還有一個 inherit 繼承屬性值，但是 IE 瀏覽器的支援度並不是非常好，舊版的 IE 不支援 inherit 的繼承功能，建議不要使用。有了這些參數表的實際效果，就可以將參數應用在範例中。

CSS vertical-align 屬性範例

範例輸出效果

這張圖未使用 vertical-align 屬性

這張圖 vertical-align 設為 text-top

這張圖 vertical-align 設為 middle

這張圖 vertical-align 設為 bottom

範例總共準備了四個不同的 vertical-align 垂直對齊效果，第一張圖片並未使用 vertical-align 屬性，所以出現的位置有點飄起來的感覺，美觀度並不是很好，第二個是使用 text-top 的效果，圖片最高點與該行文字的最高點對齊，所以該行文字最上方就會比較平滑，第三個是使用 middle 屬性值，讓圖片垂直置中於該行文字，第四個則是讓圖片最低點對齊該行元素的最低點。

以上即為 CSS vertical-align 屬性的實際範例，如何應用在網頁中，讓排版更漂亮，就看各位網頁設計師的靈活運用技巧了。

CSS vertical-align 屬性不只是可以用來控制圖片的垂直對齊效果，也可以用來設計表格欄位內的文字垂直對齊效果，讓文字垂直靠上對齊或垂直靠下對齊，讓表格看起來更為整齊，請參閱《HTML 表格欄位內文字靠上對齊》與《HTML 表格欄位內文字靠下對齊》的介紹。

更多 CSS 對齊期技巧