本文是翻譯過來的，如果有不對的地方還請指教~，原文鏈接：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不同的設置值相對于不同的元素

默認值為baseline

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

baseline	sub	super	<percentage>	<length>
與line盒子baseline重合	line盒子baseline下	line盒子baseline上	相對于line-height的大小	絕對長度

• 根據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> View Code

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

兩個元素一高一矮，矮的不設置分布，默認在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> View Code

高：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> View Code

		?
兩個較高的元素， 一個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> View Code

解決方案：讓這些元素設置成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> View Code

這種情形不會在有文本內容的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> View Code

• span和input

<div style="height: 40px;"> x<span style="border: 1px solid red; display: inline-block; height: 100%; width: 50px;"></span><input type="text" style="height: 100%; border: 1px solid green;"> </div>

?

五、讓vertical-align不再神秘！

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

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

?我的個人總結（非翻譯）

• 文本只根據line-height來進行布局：垂直居中（父子中大的line-height）
• line-height和height總是取較大的值
• 文本的line-height和height再小也會讓文本顯示
• 先根據line-height進行布局，height變到很小的時候，文本的下方區域會變小，直到文本底邊，上方區域不變

轉載于:https://www.cnblogs.com/coolqiyu/p/7292564.html

總結

以上是生活随笔為你收集整理的【翻译】关于vertical-align所有你需要知道的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。