寫在前面的話
開(kāi)始學(xué)習(xí)前端以來(lái)，在CSS相關(guān)知識(shí)當(dāng)中困擾我最多的就是Vertical-Align這個(gè)屬性。在stackoverflow上查找相關(guān)問(wèn)題的時(shí)候看到了這篇文章，于是將它翻譯出來(lái),作為自己的一次學(xué)習(xí)筆記吧。
正文
在遇到將元素在垂直方向上對(duì)齊的需求時(shí)，CSS提供了多種方法，有時(shí)候我用float解決，有時(shí)候我使用position:absolute解決，還有時(shí)候采用的方法是手動(dòng)調(diào)整margin和padding。
其實(shí)我并不喜歡這些解決方法，float會(huì)讓元素的頂端對(duì)齊而且需要手動(dòng)清楚浮動(dòng)。絕對(duì)定位讓元素脫離了正常流，這樣這些元素就不會(huì)再影響到周圍的元素。在元素的padding和margin固定的情況下，一點(diǎn)小的改變也很有可能對(duì)布局造成影響。
接下來(lái)登場(chǎng)的就是本文的主角了：Vertical-align。通常來(lái)說(shuō)使用這個(gè)屬性進(jìn)行布局是一種hack行為，因?yàn)樗緛?lái)并不是被用于這個(gè)目的。它用在文本和與文本相鄰元素的垂直方向上的對(duì)齊問(wèn)題。然而，你也可以使用Vertical-align在不同的上下文中對(duì)元素進(jìn)行靈活的，細(xì)粒度的排布。元素的尺寸無(wú)需知曉，元素任然處于正常流當(dāng)中，因此元素的變化會(huì)影響到周圍的元素，這使得Vertical-align是非常有價(jià)值的排布方案的選擇。
Vertical-align的奇特之處
Vertical-align有時(shí)候會(huì)變的面目猙獰。它似乎有一些謎一樣的規(guī)則。舉例來(lái)說(shuō)，有時(shí)候你改變了Vertical-align的值，但是該元素垂直方向上沒(méi)有發(fā)生改變反而別的元素改變了位置。
一些資料在談到Vertical-align這個(gè)問(wèn)題的時(shí)候深入程度不夠，特別是當(dāng)人們想使用這個(gè)屬性布局的時(shí)候。這些資料更多的將精力集中在了一個(gè)誤區(qū)上，就是嘗試將元素內(nèi)的一切都垂直對(duì)齊。他們給出了一下在簡(jiǎn)單情況下的例子來(lái)解釋Vertical-align這個(gè)屬性而忽略了一些復(fù)雜奇怪的方面。
使用Vertical-align的要求
Vertical-align被用于垂直對(duì)齊inline元素，也就是display值為inline和inline-block的元素。inline-table的元素不在本文的討論范圍內(nèi)。
inline元素基本上值得就是文本
inline-block元素就像它的名字一樣，同時(shí)具備inline元素和block元素的特點(diǎn)，這樣的元素有padding,margin,border,width,height。其中高度有可能是由元素的內(nèi)容決定的。
inline元素一個(gè)挨著一個(gè)的擺放在行內(nèi)，當(dāng)行內(nèi)元素太多的情況下，一個(gè)新行會(huì)被創(chuàng)建出來(lái)，這些行也叫做line--box。它將行內(nèi)的所有內(nèi)容都包裹了起來(lái)。根據(jù)行內(nèi)內(nèi)容的不同，line-box的尺寸也會(huì)不同，在接下來(lái)的圖里面，紅線代表了line-box的上下
從左到右的三幅圖片都是inline-block元素，不同的是，左面包含著沒(méi)有脫離正常流的內(nèi)容c，中間的除了沒(méi)有脫離正常流的內(nèi)容以外還加了overflow:hidden,右面的沒(méi)有內(nèi)容但是內(nèi)容區(qū)還有高度。紅線代表了margin-box的邊界。黃色代表的是border，綠色的是padding，藍(lán)色的是content，藍(lán)色的線代表的還是baseline。
inline-block元素的外邊緣就是margin-box的邊緣。
inline-block元素的baseline的位置要看該元素有沒(méi)有處于正常流之內(nèi)的內(nèi)容。
(1)在有處于正常流內(nèi)容的情況下，inline-block元素的baseline就是最后一個(gè)作為內(nèi)容存在的元素的baseline，這個(gè)元素的baseline的確定就要根據(jù)他自身來(lái)確定了。
(2)在overflow屬性不為visible的情況下，baseline就是margin-box的下邊界了。
(3)第三種情況下baseline還是margin-box的下邊界。
line-box
原因就是左面的文字根本就沒(méi)有發(fā)生對(duì)齊行為，它還是對(duì)齊于line-box的baseline。而vertical-align對(duì)齊的點(diǎn)是baseline加上半個(gè)x的距離(half of the x-height)。因此文字的最高點(diǎn)超過(guò)了icon的高度。
而右面的例子，文字與icon都對(duì)齊于一個(gè)中點(diǎn)，文字的baseline稍微下移，位于line-box的baseline的下方。結(jié)果是很好的達(dá)到了icon與文字對(duì)齊的效果。
line-box的baseline的移動(dòng)問(wèn)題
這是一個(gè)Vertical-align的坑，line-box中的所有元素都會(huì)影響到baseline的位置。假設(shè)，一個(gè)元素按某種方式垂直對(duì)齊了，但是這種對(duì)齊方式會(huì)引起baseline的移動(dòng)，又因?yàn)榇蟛糠值拇怪睂?duì)齊方式(除了top和bottom)和baseline有關(guān)，因此這個(gè)元素的垂直方向?qū)R的行為會(huì)引起該line-box內(nèi)其他元素位置的調(diào)整。
下面還是一些例子
一個(gè)很高的元素，其高度占滿了整個(gè)line-box，那么vertical-align對(duì)其實(shí)沒(méi)有影響的，在它的top和bottom之外沒(méi)有空間讓其移動(dòng)。但是為了滿足它的vertical-align的值，line-box的baseline會(huì)發(fā)生移動(dòng)，左面的高元素的取值為text-bottom，矮元素的取值為baseline。右面的高元素的取值為text-top，你會(huì)看到baseline跳上去了
<!-- left mark-up --> <span class="tall-box text-bottom"></span> <span class="tall-box text-top"></span> <!-- mark-up in the middle --> <span class="tall-box text-bottom"></span> <span class="tall-box text-top"></span> <span class="tall-box middle"></span> <!-- right mark-up --> <span class="tall-box text-bottom"></span> <span class="tall-box text-top"></span> <span class="tall-box text-100up"></span> <style type="text/css"> .tall-box { display: inline-block; /* size, color, etc. */ } .middle { vertical-align: middle; } .text-top { vertical-align: text-top; } .text-bottom { vertical-align: text-bottom; } .text-100up { vertical-align: 100%; } </style>
inline元素下方可能會(huì)有一點(diǎn)空隙
下面給出一個(gè)例子，如果嘗試將li元素在垂直方向上進(jìn)行對(duì)齊的話在，這個(gè)現(xiàn)象非常常見(jiàn)。
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試