本文是翻譯過來的，如果有不對的地方還請指教~，原文鏈接：Vertical-Align: All You Need To Know

前面一些說明，可以略過不看吧

我經常需要對元素進行垂直方向上的布局。

CSS提供了一些方法來實現這個功能，比如float，position: absolute，手動地增加margin或padding。

我並不是很喜歡這些方法。Floats只能讓元素在頂端布局，而且需要手動清除浮動。absolute定位讓元素離開文檔流，且不再影響它的周圍環境。利用固定的margigin和padding會讓布局不夠靈活。

但還有另一個方法：vertical-align。我想它應該得到更多的信任。技術上，使用vertical-align來布局是一個hack。因為，它不是為此而設計的。它主要是用來布局文本和文本旁的元素。當然，你也可以在不同的上下文中用vertical-align來靈活地布局元素。該方式下，元素的大小不需要被知道，元素在文檔流中，其它元素可以對它的改變做出相應改變。

古怪的vertical-align

vertical-align有時很奇怪。使用它有時會讓人沮喪。比如，對於有些元素設置vertical-align後它會有影響，但是有些卻不會。我仍然在vertical-align的黑暗中一次又一次摸索。

不幸的是，大多數的分析比較表面。尤其是如果我想用vertical-align進行布局。他們主要關註解釋嘗試利用vertical-align來布局一個元素中所有元素是一個錯誤。他們給出了vertical-align的基本介紹，並說明在一些簡單情況下元素如何布局。但是，他們沒有解釋tricky的部分。

所以，我把這篇文章的目標設置為：一次性完全地闡明vertical-align的行為。通過學習W3C CSS規範以及一些實例得到這篇文章。

正文開始——

哪些元素可以使用vertical-align

vertical-align是用於inline級元素。這些元素的display屬性為：

• inline：包裹文本的基本標簽
• inline-block：塊元素以inline方式呈現。它們可以設置寬度和高度，也可以設置padding、border和margin
• inline-table（在本文中沒有考慮）

inline級元素分布在一個行中。如果元素過多在一行中放不下時，那麽一個新行就會在下面被創建。所有這些行都叫做line盒子，它包裹了這一行中的所有內容。不同的內容大小意味著line盒子有不同的高度。下圖用紅線標出line盒子的頂邊和底邊。

line盒子會勾勒出在其中內容的輪廓。在這些line盒子中，vertical-align用於對一個獨立的元素進行布局。

基線baseline和外邊緣outer-edge

垂直布局的最重要的關鍵點是它包含的元素的基線。在有些情況下，包裹元素的line盒子的頂邊和底邊也很重要。讓我們來看看不同元素類型的基線和外邊緣。

• inline元素

圖中線的標識說明：紅線：line height頂邊和底邊；綠線：字體font的高度font-size（=基線上方的高度+基線下方的深度）；藍線：基線

line-height = font-size的高度	line height = font-size的2倍	line height = font-size的一半

inline元素的外邊緣讓元素布局在line的頂邊和底邊之間。如果line-height小於font的高度，這就不重要了。所以，外邊緣就是圖中的紅線。

inline元素的基線是字符所在的位置。就是圖中的藍線。粗略地說，就是字體高度的中間的下方。

• inline-block元素

元素盒子模型：紅線：外邊距margin；黃色：border，綠色：padding，藍色：內容區域；藍線：inline-block元素的基線

inline-block元素的外邊緣是它的margin的頂邊和底邊，就是上圖中的紅線。

inline-block元素的baseline依賴於元素是否包含處於在正常流中的內容

inline-block元素中一個字符c inline-block元素的baseline為正常流中的 最後一個內容元素的baseline	inline-block元素中一個字符c，且overflow: hidden inline-block元素的baseline為盒子margin的底邊	inline-block元素中沒有內容，但是為內容區域設置了寬高 inline-block元素的baseline為盒子margin的底邊

• line盒子

text盒子在line盒子中，它的頂邊和底邊由圖中綠色標識。這個text盒子可以看作是一個line盒子中沒有任何布局的inline元素。它的高度與父元素的font-size高度對應。因此，text盒子就是包含line盒子中未格式化的文本。也就是圖中的綠色部分。因為，text盒子與baseline是綁定在一起，當baseline移動時它也會隨著移動。

對文本元素用灰色進行標亮

line盒子頂邊與最上面元素的頂邊一致，line盒子底邊與最下面元素的底邊一致。它是由紅線標識。

line盒子的基線由藍線標識。因為line盒子的基線是不可見的，可能不是很明顯看到baseline在哪。但是，你可以在line的開頭添加一個字符，比如圖中的X，如果這個元素沒有用任何方法布局，那麽它默認在baseline上。

CSS 2.1 does not define the position of the line box‘s baseline.

這可能是最令人疑惑的部分。這意味著，baseline被放置在需要滿足其它條件如vertical-align以及最小化line盒子的高度。

總結兩點

• line盒子，它是垂直布局發生的位置。它有baseline，text盒子，頂邊，底邊
• inline級元素。它們是被布局的對象。它們有baseline，頂邊和底邊（font-size）

vertical-align的值

vertical-align不同的設置值相對於不同的元素

• 根據line盒子的baseline分布元素的baseline

• 根據line盒子的baseline分布元素的外邊緣

middle：元素頂邊、底邊的中點是在（line盒子baseline+X高度一半）位置

• 根據line盒子的text盒子分布元素的外邊緣

text-top：元素的頂邊與line盒子的text盒子的頂邊重合

text-bottome：元素的底邊是line盒子的text盒子的底邊重合

• 根據line盒子的外邊緣分布元素的外邊緣

top：元素的頂邊和line盒子的頂邊重合

bottom：元素的底邊和line盒子的底邊重合

為什麽vertical-align以這種方式來呈現？（幾個實例）

• 讓一個icon和文本都垂直居中

<!-- left mark-up -->
<span class="icon middle"></span>
Centered?
<!-- right mark-up -->
<span class="icon middle"></span>
<span class="middle">Centered!</span>

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

Centered? 沒有設置樣式，默認在基線上 因為取的是小寫字母x的高度，而C是大寫， 所以Centered?看起來並沒有垂直居中	對Centered!設置垂直居中

• line盒子基線移動

為了滿足vertical-align的布局設置，line盒子的基線會自動發生移動

• • 情形一

<!-- 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>

兩個元素一高一矮，矮的不設置分布，默認在baseline上 高的設置text-bottom	兩個元素一高一矮，矮的不設置分布，默認在baseline上 高的設置text-top，而text盒子是在baseline周圍， 為了讓高的能實現text-top布局，所以需要讓baseline上移

• • 情形二

<!-- 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>

高：vertical-align: top 矮：默認	高：vertical-align: bottom 矮：默認 雖然設置的是相對於line盒子的top，基線也會上移

• • 情形三

<!-- 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>

兩個較高的元素， 一個text-top，一個text-bottom	增加第三個元素，設置為middle 該元素沒有超過line盒子的邊界，故 對baseline位置和line盒子高度沒有影響	增加第三個元素，設置為vertical-align: 100% 左圖是原文的，右圖是自己實現的，好像有點不太一樣 黃色部分元素x的基線應該在line盒子基線上line盒子高度的100%

• inline級元素底部有小間隙

比如布局一個li列表，這是由於baseline底部會留一些空間來放置文本的下行部分

<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>

解決方案：讓這些元素設置成vertical-align

<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>

這種情形不會在有文本內容的inline-block元素中發生，因為內容已經把baseline移到上方

• inline級元素水平方向的間隙會破壞布局

兩個inline-block寬度都設置為50%，且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>

讓vertical-align不再神秘！

當vertical-align並不如你所相像地那樣表現，那麽請考慮以下兩個問題：

• line盒子的baseline、頂邊、底邊在哪？
• 內聯級元素的baseline、頂邊、底邊在哪？

【翻譯】關於vertical-align所有你需要知道的