vertical-align這個(gè)屬性主要目的用于將相鄰的文本與元素對(duì)齊稼跳。而實(shí)際上煮寡，verticle-algin可以在不同上下文中靈活地對(duì)齊元素楞黄，以及進(jìn)行細(xì)粒度的控制涝影，不必知道元素的大小。元素仍然在文檔流中魄眉，因而其他元素可以根據(jù)它們大小的變化進(jìn)行相應(yīng)的調(diào)整砰盐。

對(duì)哪些元素可以使用Vertical-Align

vertical-align用于對(duì)齊行內(nèi)元素。所謂行內(nèi)元素坑律，即display屬性值為下列之一的元素：inline岩梳、inline-block、inline-table晃择。
其中冀值，行內(nèi)元素（inline element）就是包含文本的標(biāo)簽。
而行內(nèi)塊元素（inline-block element）宫屠，顧名思義列疗，就是位于行內(nèi)的塊元素±缩澹可以有寬度和高度（可以由其內(nèi)容決定）抵栈，也可以有內(nèi)邊距、邊框和外邊距坤次。

行內(nèi)級(jí)元素會(huì)相互挨著排成行古劲。如果一行排不下，就會(huì)在下方再建一行缰猴。所有行都會(huì)創(chuàng)建所謂的行盒子绢慢，行盒子裝著自己行中的所有內(nèi)容。內(nèi)容的高度不同，行盒子的高度也不同胰舆。在下面的示意圖中，行盒子的頂部和底部用紅色點(diǎn)線表示蹬挤。

這些行盒子限定了我們可以影響的范圍缚窿。在行盒子內(nèi)部，可以通過vertical-align來對(duì)齊個(gè)別元素焰扳。那么倦零，相對(duì)于什么來對(duì)齊元素呢？

基線與外邊界

垂直對(duì)齊最重要的參考點(diǎn)吨悍，就是相關(guān)元素基線扫茅。某些情況下，行盒子的上下外邊界也會(huì)成為參考點(diǎn)育瓜。下面我們就來看一看相關(guān)元素類型的基線和外邊界葫隙。
行內(nèi)元素

這里有三行文本緊挨著。紅線表示行高的頂邊和底邊躏仇，綠線表示字體高度恋脚，藍(lán)線表示基線。左邊這一行焰手，行高與字體高度相同糟描，因此上下方的紅色和綠線重疊在了一起。中間一行书妻，行高是font-size的兩倍船响。右邊一行，行高為font-size的一半躲履。
行內(nèi)元素的外邊界與自己行高的上见间、下邊對(duì)齊。行高比font-size小不小并不重要崇呵。因此上圖中紅線同時(shí)也就表示外邊界缤剧。

行內(nèi)元素的基線是字符恰好位于其上的那條線，也就是圖中的藍(lán)線域慷。大致來說荒辕，基線總是穿過字體高度一半以下的某一點(diǎn)。

行內(nèi)塊元素

從左到右：包含流內(nèi)內(nèi)容（“c”）的行內(nèi)塊犹褒、包含流內(nèi)內(nèi)容且設(shè)置了溢出（overflow: hidden）的行內(nèi)塊和未包含流內(nèi)內(nèi)容（但內(nèi)容區(qū)有高度）的行內(nèi)塊抵窒。紅線表示外邊距的邊界，黃色是邊框叠骑，綠色的內(nèi)邊距李皇，藍(lán)色是內(nèi)容區(qū)，藍(lán)線是每個(gè)行內(nèi)塊元素的基線。

行內(nèi)塊元素的外邊界即其外邊距盒子的上掉房、下兩邊茧跋，也就是圖中的紅線。

行內(nèi)塊元素的基線取決于元素是否包含流內(nèi)內(nèi)容：

• 有流內(nèi)內(nèi)容的行內(nèi)塊元素卓囚，基線就是正常流中最后內(nèi)容元素的基線（左）瘾杭。這個(gè)最后元素的基線是按照它自己的規(guī)則找到的。
• 有流內(nèi)內(nèi)容但overflow屬性值不是visible的行內(nèi)塊元素哪亿，基線就是外邊距盒子的底邊（中）粥烁。也就是與行內(nèi)塊元素的下外邊界重合。
• 沒有流內(nèi)內(nèi)容的行內(nèi)塊元素蝇棉，基線同樣是外邊距盒子的底邊（右）讨阻。

行盒子

行盒子的文本盒子的上、下邊（綠色）還有基線（藍(lán)色）篡殷。同時(shí)钝吮，還用灰色背景表示了文本元素的區(qū)域。
行盒子的頂邊與該行中最頂部元素的頂邊重合贴唇，底邊與該行中最底部元素的底邊重合搀绣。因此圖中的紅線表示的就是行盒子。
行盒子的基線是個(gè)變量戳气。
在使用vertical-align時(shí)這一塊應(yīng)該是最令人困惑的了链患。也就是說，基線畫在哪里需要滿足很多條件瓶您，比如要符合vertical-align指定的條件麻捻，同時(shí)還要保證行盒子高度最小。這是個(gè)自由變量呀袱。

因?yàn)樾泻凶拥幕€并不可見贸毕，所以有時(shí)候不容易確定它的位置。但實(shí)際上有個(gè)簡單的辦法可以令其可見夜赵。只要在相關(guān)行的開頭加上一個(gè)字母明棍，比如上圖中開頭的“x”即可。如果這個(gè)字母沒有被設(shè)置對(duì)齊寇僧，那么它默認(rèn)就位于基線之上摊腋。

圍繞基線的是行盒子中的文本盒子∴铱可以簡單地把文本盒子看成行盒子內(nèi)部未經(jīng)對(duì)齊的行內(nèi)元素兴蒸。文本盒子的高度等于其父元素的font-size。因此细办，文本盒子只是用來盛放未經(jīng)格式化的文本的橙凳。上圖中的綠線表示的就是文本盒子。由于文本盒子與基線關(guān)聯(lián)，所以基線移動(dòng)它也會(huì)跟著移動(dòng)岛啸。（W3C規(guī)范里稱這個(gè)文本盒子為strut）

現(xiàn)在钓觉，我們已經(jīng)知道了對(duì)齊相關(guān)的一切要素。下面簡單總結(jié)一下最重要的兩點(diǎn)值戳。

• 有一個(gè)區(qū)域叫行盒子议谷。行盒子中的內(nèi)容可以垂直對(duì)齊。行盒子有基線堕虹、文本盒子，還有上邊和下邊芬首。
• 還有行內(nèi)元素赴捞，也就是可以被對(duì)齊的對(duì)象。行內(nèi)元素有基線郁稍，以及上邊和下邊赦政。

Vertical-Align的值

使用vertical-align，前面提到的參考點(diǎn)就會(huì)按照某種關(guān)系被設(shè)置好耀怜。

對(duì)齊行內(nèi)元素的基線和行盒子的基線

• baseline：元素基線與行盒子基線重合恢着。
• sub：元素基線移動(dòng)至行盒子基線下方。
• super：元素基線移動(dòng)至行盒子基線上方财破。
• <百分比值>：元素基線相對(duì)于行盒子基線向上或向下移動(dòng)掰派，移動(dòng)距離等于line-height的百分比。
• <長度值>：元素基線相對(duì)于行盒子基線向上或向下移動(dòng)指定的距離左痢。

相對(duì)于行盒子的基線對(duì)齊元素的外邊界

• middle：元素上靡羡、下邊的中點(diǎn)與行盒子基線加上x-height的一半對(duì)齊。

相對(duì)于行盒子的文本盒子對(duì)齊元素的外邊界

還有兩種情況是相對(duì)于行盒子的基線對(duì)齊俊性，因?yàn)槲谋竞凶拥奈恢糜尚泻凶拥幕€決定略步。

• text-top：元素的頂邊與行盒子的文本盒子的頂邊對(duì)齊。
• text-bottom：元素的底邊與行盒子的文本盒子的底邊對(duì)齊定页。

相對(duì)于行盒子的外邊界對(duì)齊元素的外邊界

• top：元素的頂邊與行盒子的頂邊對(duì)齊趟薄。
• bottom：元素的底邊與行盒子的底邊對(duì)齊。

為何Vertical-Align的行為如此乖張

下面我們看看在某些情況下的垂直對(duì)齊典徊。特別是一些容易出錯(cuò)的情況杭煎。

居中圖標(biāo)

有一個(gè)圖標(biāo)，我想讓它與一行文本垂直居中宫峦。如果只應(yīng)用vertical-align: middle好像不行岔帽，比如這個(gè)例子：

<span class="icon middle"></span>
Centered?
<span class="icon middle"></span>
<span>Centered!</span>

<style type="text/css">
  .icon { display: inline-block; /* size, color, etc. */ }
  .middle { vertical-align: middle; }
</style>

這次可以看清問題所在了。因?yàn)樽髠?cè)的情況是文本沒對(duì)齊导绷，而是仍然位于基線之上犀勒。應(yīng)用vertical-align: middle，實(shí)際上會(huì)導(dǎo)致圖標(biāo)中心與不出頭小寫字母的中心（x-height的一半）對(duì)齊，所以出頭的字母會(huì)在上方突出出來贾费。
右側(cè)钦购，仍然是對(duì)齊整個(gè)字體區(qū)的垂直中點(diǎn)。結(jié)果文本基線稍稍向下移動(dòng)了一點(diǎn)褂萧，于是就實(shí)現(xiàn)了文本與圖標(biāo)完美對(duì)齊押桃。

行盒子基線的移動(dòng)

這是使用vertical-align時(shí)一個(gè)常見的坑：行盒子基線的位置會(huì)受到其中所有元素的影響。假設(shè)一個(gè)元素采用的對(duì)齊方式會(huì)導(dǎo)致行盒子移動(dòng)导犹。由于大多數(shù)垂直對(duì)齊（除top和bottom外）唱凯，都相對(duì)于基線計(jì)算，因此這會(huì)導(dǎo)致該行所有其他元素重新調(diào)整位置谎痢。
下面是幾個(gè)例子磕昼。

• 如果行內(nèi)有一個(gè)很高的元素，這個(gè)元素上方和下方都沒有空間了节猿，此時(shí)要與行盒子的基線對(duì)齊票从，就必須讓它移動(dòng)。矮盒子是vertical-align: baseline滨嘱。左側(cè)的高盒子是vertical-align: text-bottom峰鄙，而右側(cè)的高盒子是vertical-algin: text-top√辏可以看到吟榴，基線帶著矮盒子移動(dòng)到了上方。

<!-- left mark-up -->
 <span class="tall-box text-bottom"></span>
 <span class="short-box"></span>
 <!-- right mark-up -->
 <span class="tall-box text-top"></span>
 <span class="short-box"></span>

 <style type="text/css">
   .tall-box,
   .short-box { display: inline-block; /* size, color, etc. */ }
   .text-bottom { vertical-align: text-bottom; }
   .text-top { vertical-align: text-top; }
 </style>

在通過vertical-align的其他值對(duì)齊一個(gè)較高的元素時(shí)躺彬，也會(huì)出現(xiàn)同樣的現(xiàn)象煤墙。

• 即使設(shè)置vertical-align為bottom（左）和top（右），也會(huì)導(dǎo)致基線移動(dòng)宪拥。這就很奇怪了仿野，因?yàn)榇藭r(shí)根本不關(guān)基線什么事。

<!-- left mark-up -->
<span class="tall-box bottom"></span>
<span class="short-box"></span>
<!-- right mark-up -->
<span class="tall-box top"></span>
<span class="short-box"></span>

<style type="text/css">
  .tall-box,
  .short-box { display: inline-block;   /* size, color, etc. */ }
  .bottom { vertical-align: bottom; }
  .top { vertical-align: top; }
</style>

• 把兩個(gè)較大的元素放在一行并垂直對(duì)齊它們她君，基線也會(huì)移動(dòng)以匹配兩種對(duì)齊脚作。然后，行的高度會(huì)調(diào)整（左）缔刹。再增加一個(gè)元素球涛，但該元素對(duì)齊方式?jīng)Q定了它不會(huì)超出行盒子的邊界，所以行盒子不會(huì)調(diào)整（中）校镐。如果新增的元素會(huì)超出行盒子的邊界亿扁，那么行盒子的高度和基線就會(huì)再次調(diào)整。在這例子中鸟廓，前兩個(gè)盒子向下移動(dòng)了（右）从祝。

<!-- left mark-up -->
<span class="tall-box text-bottom"></span>
<span class="tall-box text-top"></span>
<!-- middle mark-up -->
<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>

行內(nèi)元素下面可能會(huì)有一個(gè)小間隙

看看這個(gè)例子：對(duì)列表元素的li應(yīng)用vertical-align襟己。

<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

<style type="text/css">
  .box { display: inline-block; /* size, color, etc. */ }
</style>

我們看到，列表項(xiàng)位于基線上牍陌∏嬖。基線下面有一個(gè)小間隙，用于文本的下伸部分毒涧。怎么辦贮预？只要把基線向上移開一點(diǎn)就行了，比如用vertical-align: middle：

<ul>
  <li class="box middle"></li>
  <li class="box middle"></li>
  <li class="box middle"></li>
</ul>

<style type="text/css">
  .box { display: inline-block;/* size, color, etc. */ }
  .middle { vertical-align: middle; }
</style>

有文本內(nèi)容的行內(nèi)塊不會(huì)出現(xiàn)這種情況契讲，因?yàn)閮?nèi)容已經(jīng)把基線向上移了仿吞。

行內(nèi)元素間的間隙會(huì)破壞布局

這主要是行內(nèi)元素本身的問題。由于vertical-align必然會(huì)遇到行內(nèi)元素捡偏，所以有必要了解一下茫藏。

在前面列表項(xiàng)的例子中也可以看到這個(gè)間隙。這個(gè)間隙來自你的標(biāo)記中行內(nèi)元素間的空白霹琼。行內(nèi)元素間的所有空白會(huì)折疊為一個(gè)。如果我們要通過width: 50%實(shí)現(xiàn)并排放兩個(gè)行內(nèi)元素凉当，那這個(gè)空白就會(huì)成為障礙枣申。因?yàn)橐恍蟹挪幌聝蓚€(gè)50%再加一個(gè)空白，結(jié)果就會(huì)折行（左）看杭。要?jiǎng)h除這個(gè)間隙忠藤，需要在HTML中通過注釋刪除空白（右）。

<!-- left mark-up -->
<div class="half">50% wide</div>
<div class="half">50% wide... and in next line</div>
<!-- right mark-up -->
   <div class="half">50% wide</div><!--
--><div class="half">50% wide</div>

<style type="text/css">
  .half { display: inline-block; width: 50%; }
</style>