簡介
今天我打算對css樣式vertical-align的知識點進行一些總結,在我寫具體內容之前,我先要說明一下,就是關于vertical-align的已經有很多文章都有所解釋,但是我總覺得他們在某些點上解釋不夠清楚,所以我這次的總結是基于我看過的一些文章和自我的理解寫的,因此不具有權威性,甚至有些地方會有些出入,所以只能僅供參考.如果大家有什么好的提議,我希望可以告訴我.
內容
vertical-align樣式只對inline級的元素有效,即display為inline,inline-block,inline-table的元素. 所以這個屬性對塊級元素是無效的.
而在介紹該樣式前,我要先向大家介紹兩個至關重要的概念.
- linebox
linebox是具有一個與該行最頂的元素的頂部邊緣對齊的頂部邊緣和一個與該行最底的元素的底部邊緣對齊的底部邊緣的區域.這句很拗口,下面見圖:
其中紅色的虛線區域便是linebox包圍的區域,linebox的高度取決于內容.許多個inline級元素一同構成一個linebox.
1.其中top對齊方式就是元素的頂部與linebox的頂部對齊(重合).
2.其中middle對齊方式就是元素的頂部和底部的中點與linebox的中點對(重合).
3.其中baseline對齊方式就是元素的頂部與linebox的baseline對齊(重合),但是關于linebox的baseline的位置并有一個固定的取值,它是會變化的,不過我們可以通過寫一個沒有設置任何對齊方式的內容為x文本來確定linebox的基線,緊貼x的底部的虛線便是linebox的基線.(可見上圖)
4.其中bottom對齊方式就是元素的頂部與linebox的底部對齊(重合).
5.其中sub對齊方式就是元素的baseline低于linebox的baseline.一般常用來做下標,例:
6.其中super對齊方式就是元素的baseline略高于linebox的baseline.一般常用來做上標,例:
- baseline.
上述中提到了linebox的baseline的位置,所以下面便不再重復了,直入主題.
我來說下inline級元素的baseline的位置,inline級元素的baseline的位置分為兩種: - inline元素
在這里你看到三行的文本相鄰排布。行高的頂部和底部是由紅線表示的，字體的高度是由綠線來表示的，而baseline是由藍線表示的。在左邊，文本具有一個與字體大小相同的行高，綠色和紅線在上下都重疊了。在中間，行高（line-height）是字體大小的兩倍大。在右邊，行高是字體大小（font-size）的一半。
inline元素的外邊緣跟自己line-height的頂部和底部邊緣對齊，如果line-height小于font-size的話也不會改變。所以，在上面的圖中的行的外邊界是紅線。
inline元素的baseline字符底部所坐的線，就是圖中的藍線。粗略地說，baseline是在font-size中間下面的一個地方，看看W3C規范的詳細定義。
- inline-block元素
inline-block.png
從左到右，你看到的是一個擁有流內容（一個“c”）的inline-block元素，一個擁有流內容且overflow: hidden;的inline-block元素和一個沒有流內容的inline-block元素（但內容區域有一個高度）。margin的邊界由紅線表示，以及黃色的border，綠色的padding和藍色的內容區域，藍線是每個inline-block元素的baseline。
inline-block元素的外邊緣是其margin-box的頂部和底部邊緣，即圖中的紅線。
inline-block的baseline取決于元素是否具有流內容：
在流內容的情況下，inline-block元素的baseline是正常流的最后一個內容元素的baseline（左邊的例子）。對于這最后一個元素，它的baseline位置由它自己的規則決定。
在流內容，但具有overflow:hidden的情況下，baseline是margin-box的底邊緣（中間的例子），也相當于inline-block元素的底邊緣。
如果沒有流內容，則跟上一個一樣，baseline位于margin-box的底邊緣（右邊的例子）。
- line box baseline的移動
這是最難理解的地方了,我到現在還是一知半解的.所以只能引用原文了
這里有一個使用vertical-align常見的盲點：line box baseline的位置會被行內所有元素所影響。讓我們假設這種情況，一個元素以使得line box baseline必須移動的方式進行對齊。由于大多數垂直對齊方式（除了頂部和底部）與baseline相關，這會導致該行中的所有其他元素移動。
一些例子：
如果有一個很高的元素占據了整行的高度，事實上它也決定了整行高度，那么vertical-align對它就沒有效果，上下都沒有空間讓它移動，所以line box的baseline為了滿足對齊關系必須移動。在下圖中，短方塊設置了vertical-align: baseline;，左例中高方塊的垂直對齊方式是text-bottom，而在右邊中是text-top。你可以看到baseline與短方塊始終在一起。
1.png
當用vertical-align的其他值來對齊高方塊時也有相似的表現。
然而甚至設置vertical-align為bottom（左圖）和top（右圖）也會使baseline移動。這十分奇怪，因為這應該與baseline并無關系。
2.png
將一行內兩個較大的元素垂直對齊會使得baseline移動來同時滿足兩個的對齊方式，并且也會調整line box的高度（左圖）。再添加一個元素，如果沒有因為其對齊方式而超越原有line box的邊緣，則不影響line box的高度和baseline的位置（中圖）。如果它超出了原來line box的邊緣，line box的高度和baseline會再次調整，在這種情況下，我們的前兩個方塊往下挪了（右圖）。
3.png
總結
本來是打算用自己的語言來組織vertical-algin的核心難點,但是寫的時候有些卡殼了......,(看來我還沒理解透徹.)…（⊙＿⊙；）…..所以只能引用原文的內容,還請多多包涵.還有, 我覺得其中的關鍵就是找到元素的baseline位置,和linebox的baseline位置,只要確定好這兩個因素,那么一切的vertical-algin問題便可迎刃而解了.
最后這里獻上原文章的鏈接Vertical-Align: All You Need To Know(譯)
