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 屬性範例
<style type="text/css">
#TestImg1{
    vertical-align:text-top;
}
#TestImg2{
    vertical-align:middle;
}
#TestImg3{
    vertical-align:text-bottom;
}
#SeperationLine{
    height:1px;
    border-top:1px #ccc dashed;
    margin:10px 0px;
}
</style>
這張圖未使用 vertical-align 屬性<img id="TestImg0" src="圖片網址">這張圖未使用 vertical-align 屬性
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 text-top<img id="TestImg1" src="圖片網址">這張圖 vertical-align 設為 text-top
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 middle<img id="TestImg2" src="圖片網址">這張圖 vertical-align 設為 middle
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 bottom<img id="TestImg3" src="圖片網址">這張圖 vertical-align 設為 bottom
範例輸出效果
這張圖未使用 vertical-align 屬性這張圖未使用 vertical-align 屬性
這張圖 vertical-align 設為 text-top這張圖 vertical-align 設為 text-top
這張圖 vertical-align 設為 middle這張圖 vertical-align 設為 middle
這張圖 vertical-align 設為 bottom這張圖 vertical-align 設為 bottom
範例總共準備了四個不同的 vertical-align 垂直對齊效果,第一張圖片並未使用 vertical-align 屬性,所以出現的位置有點飄起來的感覺,美觀度並不是很好,第二個是使用 text-top 的效果,圖片最高點與該行文字的最高點對齊,所以該行文字最上方就會比較平滑,第三個是使用 middle 屬性值,讓圖片垂直置中於該行文字,第四個則是讓圖片最低點對齊該行元素的最低點。

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

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

更多 CSS 對齊期技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012