【技術等級】初級

【承接文章】《CSS段落行高，竟然能夠實現垂直居中功能，神奇的CSS技術》

本文重點講解CSS技術中文本樣式的 vertical-align 屬性的詳細用法。本文屬於前端開發的初級教程，適合於剛剛開始接觸CSS技術的學習者。

vertical-align屬性的用法較為複雜，該屬性的取值較多，不瞭解這個屬性用法的學習者，一定要堅持把這篇文章讀完。

一、設置垂直方向的對齊方式：

CSS技術利用 vertical-align 屬性來設置內聯元素的垂直對齊方式

該屬性的功能是：設置內聯元素或內聯塊元素相對於所在行其他元素的垂直對齊方式。這裡在對齊時，都是考慮基線的對齊，即內聯元素的基線相對於所在行其他元素的基線的垂直對齊方式。

這裡需要注意的一定要是“內聯元素”或“內聯塊元素”。

【有關“內聯元素”的知識，可以參考小海老師前面寫的《CSS段落對齊方式，系統認識塊級元素與內聯元素，CSS前端進階篇》一文】

該屬性的取值可以有以下幾種：

• 帶有單位的數值，可以取負值，在基線對齊的基礎上，內聯元素向下移動一定的距離（正值）或者向上移動一定的距離（負值）。

• %，可以取負值，在基線對齊的基礎上，內聯元素向下移動line-height屬性的百分比的距離（正百分比）或者向上移動line-height屬性的百分比的距離。

• baseline，【默認值】基線對齊，內聯元素的基線與所在行的其他元素的基線對齊。

• sub，上標。

• super，下標。

• top，頂部對齊，內聯元素的頂部與所在行的其他元素中最高的元素的頂部對齊。

• text-top，文本頂部對齊，內聯元素的頂部與所在行的文字頂部對齊。

• middle，中部對齊，內聯元素的中部與所在行其他元素的中部對齊。

• bottom，底部對齊，內聯元素的底部與所在行的其他元素中最低的元素的底部對齊。

• text-bottom，文本底部對齊，內聯元素的底部與所在行的文字底部對齊。

二、基線垂直對齊：

要想深入瞭解vertical-align屬性各項取值的含義，首先，讓我們先看一看什麼是基線對齊。

例1：在段落標記<p></p>內部，放置一個圖片和一行文字。HTML代碼如下。

<p>

<img src="images/a.jpg" /> 小海前端

</p>

得到的效果如下圖所示，仔細觀察下圖：圖片底部和文字底部是對齊的嗎？

例1的最終效果

仔細觀察，其實它們底部並沒有完全對齊。如果將文字的字號放大，可以看得更加明顯。

將例1中的文字放大後的效果

上圖中，由於文字字號的變大，在圖片中只呈現了一個“小”字，但是我們完全可以看出，圖片的底部並沒有和文字的底部對齊。而對齊文字的這個位置實際上是文字的“基線”。

【有關“基線”的知識，可以參考小海老師前面寫的《CSS段落行高，竟然能夠實現垂直居中功能，神奇的CSS技術》一文】

原來，圖片本身屬於內聯元素，而 內聯元素的vertical-align屬性的默認取值為baseline，即基線對齊，也就是圖片的基線（底部）默認和文字的基線對齊了。

三、取值為“帶有單位的數值”：

如果vertical-align屬性的取值為帶有單位的數值，則也是在基線對齊的基礎上開始上下移動一定的距離。

• 如果圖片的vertical-align屬性取值為0px，則依然為基線對齊的位置。

• 如果圖片的vertical-align屬性取值為5px，則在基線對齊位置的基礎上向下移動5px的距離。

• 如果圖片的vertical-align屬性取值為-5px，則在基線對齊位置的基礎上向上移動5px的距離。

四、取值為“百分比 ”：

如果vertical-align屬性的取值為百分比，則也是在基線對齊的基礎上開始上下移動一定的距離。

那麼，問題來了。

1. 百分比意味著移動多少像素的距離呢？

2. 百分比又是以什麼距離為基準的呢，即誰的百分比呢？

我們前端開發工程師一定要記住：vertical-align屬性的百分比取值不是父元素高度的百分比，而是 line-height 屬性取值的百分比。

即：vertical-align屬性的百分比取值是以line-height屬性的取值為基準的，及移動距離為vertical-align屬性的絕對值乘以line-height屬性取值的距離數。

假設：容器的line-height屬性取值為20px，則：

• 如果圖片的vertical-align屬性取值為0%，則依然為基線對齊的位置。

• 如果圖片的vertical-align屬性取值為50%，則在基線對齊位置的基礎上向下移動(20px*50%)的距離，即向下移動10px。

• 如果圖片的vertical-align屬性取值為-50%，則在基線對齊位置的基礎上向上移動(20px*50%)的距離，即向上移動10px。

五、取值為top和text-top：

例2：我們在例1的基礎上在段落<p></p>中再添加一個圖片，並設置圖片的高度大於文本。

仔細閱讀下列HTML代碼：

<p style="font-size:100px">

<img src="images/a.jpg" width="300" style="vertical-align:top" />

小海前端

<img src="images/a.jpg" width="500" />

</p>

從代碼中可以看出，文字“小海前端”左側的圖片設置了vertical-align屬性，並取值為top。根據文字“小海前端”左右的兩張圖片的width屬性可知，右側圖片的高度肯定比較高。

效果如下圖所示。

例2的最終效果

原因是：vertical-align屬性取值為top是指讓設置了該屬性的元素頂部和同行周圍元素中最高元素的頂部對齊。從圖中可知，顯然最高的元素是右側的圖片，因此就呈現為上圖中的外觀了。

而右面的圖片沒有設置vertical-align屬性，因此依然為“基線對齊”，即右側圖片的底部對齊文字的基線。

例3：在例2的基礎上，我們將右側圖片的高度縮小至比文字還小的程度，那可想而知，左側圖片就應該與文字頂部對齊了。

仔細閱讀下列HTML代碼：

<p style="font-size:100px">

<img src="images/a.jpg" width="300" style="vertical-align:top" />

小海前端

<img src="images/a.jpg" width="100" />

</p>

從代碼中可以看出，右側圖片的寬度由500改為了100，同時高度也會隨之等比縮小。

最終效果如下圖所示：

例3的最終效果

例4：在例2的基礎上，我們調整左側圖片vertical-align屬性的取值為text-top，則HTML代碼如下。

<p style="font-size:100px">

<img src="images/a.jpg" width="300" style="vertical-align:text-top" />

小海前端

<img src="images/a.jpg" width="500" />

</p>

則最終的顯示效果如下圖所示。

例4的最終效果

原因是：text-top屬性是要求內聯元素與同行內文本的頂部對齊。因此，就出現了上圖中的效果。

而右面的圖片沒有設置vertical-align屬性，因此依然為“基線對齊”，即右側圖片的底部對齊文字的基線。

vertical-align屬性還具備bottom和text-bottom取值，和這兩個頂部對齊（top和text-top）的含義是類似的，希望同學們自己在電腦上嘗試一下。

文章預告

下一篇文章中，小海老師會為大家講解一個vertical-align屬性和line-height屬性的應用，用於去掉圖片在容器中放置時，底部產生的小距離。這是前端開發中非常經典的bug解決方案，對於希望深入瞭解前端開發的學習者真的是非常重要。

小海教材

如果大家希望得到更加全面的關於HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上所寫的這些文章都是從前端開發的基礎開始一步一步講起的。小海老師非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都儘量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，並且是經過我精心整理和系統歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。