在日常開發過程中，我們經常會遇到如下的場景，一行中既有也有文字，而且還要和文字對齊。效果如下：
通常**如下:
some text.
修改下文字為行內塊盒子，並設定行高與盒子高度（盒子高度與高度相同）一致，效果如下:
我們發現文字區域始終與錯開了一些。怎麼解決呢？設定文字的 margin 或者將浮動並不是我們想要的方案。
那麼到底是什麼原因導致了上面的問題呢？各種搜尋後，發現實際上是行盒子內部在豎直方向上的對齊方式在作祟。
在搜尋過程中發現一篇很不錯的介紹 vertical-align 的文章，搬運如下，原文請參考vertical-align: all you need to know。
vertical-align 被用來對齊行級元素（inline-level elements）。所謂的行級元素就是那些 display 屬性為如下值得元素：
inline elements 基本上都是一些包含文字的標籤（span etc.）。
inline-block elements，顧名思義，就是行內的塊元素，它們可以擁有高度、寬度、內邊距、邊框和外邊距。
我們都知道，行級元素沿著當前行依次排列，當當前行已經被填滿時會重新建立一行。這些行就是所謂的行盒子（line box）。每個行盒子的高度依它們各自的內容的高度的不同而不同。下圖就展示不同高度的行盒子，紅線表示行盒子的上下邊界。
在這些行盒子內部，元素通過 vertical-align 屬性來進行對齊，那具體是參照什麼來對齊呢？
對於豎直方向上的對齊來說，最重要的乙個參考點就是元素的 baseline。在某些情況下也會參考元素盒子（element's enclosing box）的上下邊界。
上圖中，紅線表示行高的上下邊界；綠線表示文字的高度；藍線表示 baseline 的位置。在左圖中，文字的高度與行高相同，紅線和綠線重合了。在中間的圖中，行高是文字高度的兩倍。在右圖中，行高是文字高度的一半。
行內元素的外邊界與行高的上下邊界對齊。如果行高低於文字的高度也不要緊，元素的外邊界如上圖中的紅線。
行內元素的 baseline 就是文字所在的線。粗略的說，baseline 的位置就在文字高度的中間往下的某個位置，具體可以參照 w3c 的詳細定義。
從左到右依次為：擁有流內（in-flow）內容（乙個「c」）的行內塊元素，乙個擁有流內內容但是設定了 overflow:hidden 的行內塊元素，以及乙個擁有脫離了文件流的內容的行內塊元素。元素的 margin 邊界由紅線表示，border 為黃色，padding 為綠色，內容為藍色。每個行內塊元素的 baseline 由藍色線表示。
行內塊元素的外邊界就是它的margin盒子（margin-box）的上下邊界。也就是上圖中的紅線標示的區域。
行內塊元素的 baseline的位置取決於它是否有流內內容（in-flow content）：
上圖中，行盒子（line-box）的上邊界與該行中最上部的元素的上邊界對齊，下邊界與該行中最下部的元素的下邊界對齊。
行盒子的 baseline 是可變的，css2.1 並未定義行盒子的 baseline。實際上，baseline 的具體位置在計算方程式中是乙個自由引數，它的取值依照同時滿足 vertical-align 和最小化行高條件而定。
因為行盒子的 baseline 不可見，我們可以通過在行的開頭增加乙個字元來確定 baseline 的位置，正如上圖中的 x 一樣。如果這個字元沒有被指定任何的對齊方式，那麼它預設的對齊方式就是 baseline。
在 baseline 的周圍，行盒子有個叫做文字盒（text box）的區域。文字盒可以被簡單的看作為沒有任何對齊方式的行內元素。文字盒的高度與其父元素的字型大小一致。因此，文字盒僅僅包含行盒子中未被格式化的文字。在上圖中，綠線標識出來的區域就是文字盒的位置。因為文字盒與 baseline 相關聯，因此當 baseline 移動的時候文字盒也會跟著移動。
在 w3c 的文件中，文字盒也被叫做 strut至此，我們已經了解了所有的基礎知識，總結一下：
更多詳細定義請參考 w3c。
回到前面提到的問題，之所以與文字始終錯開了一些，是因為在行盒子中，和文字預設都是與行盒子的 baseline 對齊，也就是說的下邊界將與 baseline 對齊，當然也就錯開了一些。這個問題的修改方式就是給加上 vertical-align:middle.
關於vertical align的種種
有些時候vertical align的渲染結果並不同我們想象的一樣。雖然現在已經有很多 css 屬性可以完美替代vertical align的渲染效果，但有些時候碰到還是很頭疼，所以最好還是搞清楚它。作用物件 inline inline block子元素。這個屬性失效的情況 作用物件是塊級元素 因為...
關於 vertical align 的一些理解
關於 vertical align，我們很容易想到，這不就是告訴我們元素在縱向上和什麼對齊的屬性嗎？而事實上，正是這種寬泛的說法導致了我們對其的理解存在許多不確定性。事實上，對齊 這兩個字其實牽涉到4個物件 即哪個物件的哪條線，與哪個物件的哪條線對齊？只有將這4者搞清楚，我們才能說是理解了這個屬性。...
vertical align 樣式理解
文章參考 適用於 行內元素和單元格 table cell 元素 個人理解應用範圍 1 和 文字混排，使用vertical align屬性來定位 2 在table標籤中的td種使用vertical align屬性來定位 可以使用display table cell,注意該標籤父div一定是displa...