技本功丨呀~我不會寫CSS之vertical-align（上集）

某日閱讀《CSS世界》，筆者的一段話鞭撻了個人靈魂。原文是這樣的——

「說到這裏，我就忍不住多說兩句。不少其實工做不少年的前端開發人員，也可能不知道vertical-align的屬性值支持數值，更不知道支持負值，這着實讓我很意外「。

......

羞愧啊，滿滿的羞愧啊！本人即是那類前端開發人員啊~

因而自覺關了小黑屋，發了一天功，發憤圖強以後寫下此文，來加深我對vertical-align的認識，與大夥共勉！

寫vertical-align樣式的時候自動匹配出一長串的屬性值，看得我眼花繚亂，怎麼有那麼多屬性值？該用哪一個？爲何這個屬性值和另一個屬性值的表現形式是同樣的？細數一下vertical-align的屬性值，代碼請參考code1-1，表現形式請參考image1-1。

code1-1

編譯結果以下圖：

1. vertical-align:middle; // middle指元素的中點在基線加上父元素x字母的一半

圖片高度32px，中點即16px，字母x的高度爲8px，一半即4px，middle指元素的中點在基線加上父元素x字母的一半，8px/2-32px/2=-12px。

code2-1

編譯結果以下圖：

1. vertical-align:50%; // percentage values的參考系

圖片大小是32px32px[當前圖片是300px300px，已統同樣式img{width:32px;}]，字體大小是chrome默認的字體大小16px。只顯示文本的時候行高是22px。

默認狀況下給圖片設置vertical-align:50%，既然是百分比，那麼就必定有參考系，到底是以誰爲參考系，有三種假設：

假設一，若是以圖片的高度爲參考系，圖片向上偏移32px*50% = 16px；

假設二，若是以font-size爲參考系，圖片向上偏移16px*50% = 8px；

假設三，若是以行高line-height爲參考系，圖片向上偏移22px*50% = 11px；

不賣關子了，當vertical-align設置成百分比時，它的參考系是line-height，因此我後面列出兩個設置了line-height的行內元素來作比較。

code2-2

編譯結果以下圖：

1. vertical-align:top;和vertical-align:text-top;比較，同理bottom和text-bottom也是如此

從設置了line-height:10px;的兩個例子就能夠明顯看出來top是與父級盒模型的上邊緣對齊重合的，而text-top是與父級元素內容的上邊緣對齊重合的。

code2-3-1

編譯結果以下圖：

code2-3-2

編譯結果以下圖：

1. 水平位置

vertical-align:top;

vertical-align:middle;

vertical-align:baseline;

vertical-align:bottom;

水平位置從上到下的屬性值依次是：top/middle/baseline/bottom

這句話的意思是說，將top/middle/baseline/bottom當作一條水平線，設置vertical-align的元素去對齊這根水平線，從下圖能夠看出來這根水平線的位置從上到下依次是top/middle/baseline/bottom 。

code2-4-1

編譯結果以下圖：

這一篇主要介紹vertical-align的屬性，如下爲完整源碼，建議你們自行在瀏覽器操做一遍，查看編譯結果加深理解。

-上集完-

敬請期待中、下集