這篇內聯元素的vertical-align的文章承接前兩篇文章
從頭到尾，我們都試圖在梳理清楚內聯元素中一些較為重要的概念，其中一個很主要的目的，就是為了解決內聯元素的對齊問題。對於很多前端開發來說，對齊問題一直是一個非常常見，但有時候又讓我們感到非常困惑的問題。在這篇文章裡我會用最簡潔的解釋來解釋內聯元素到底是怎麼回事。這篇換個形式，我們用幾個問答來說明關鍵問題。
內聯元素的對齊主要由哪些屬性影響
我們以下所說的對齊主要是針對內聯元素的。我們都知道CSS最後展現在介面中的結果，經常是由多個屬性共同作用的結果。對齊主要是由font-size，line-height和vertical-align這三個屬性共同作用的結果，這也是為什麼我分了三篇來講。
內聯水平元素的baseline是什麼
vertical-align屬性有非常多的值，它的預設值是baseline即相對於基線對齊。基線的概念我們在font-size那部分也說過，那裡解釋的是文字的基線。那麼對於一個display: inline-block，並且擁有固定寬和高的元素來說，它的基線是什麼那？我可能問了一個很蠢的問題，很多人應該都知道，它的基線就是其margin-box即該元素的底部邊界（包括margin）。如圖所示，
但是如果在該元素中其中加入文字，它的基線還是底邊界嗎？實踐出真知，我們還是用例項來看下。
這種情況這個在css2.1規範裡有提及，The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
意思就是inline-block如果有overflow非visible的屬性或者沒有其中任何行盒那麼它的基線就是底部的margin邊界否則的話它的基線就是其中最後一個行盒的基線。(tip: 行盒的概念在第一篇文章中也有介紹)。
例項
下面我們要實現一個定寬高的div在容器中垂直水平居中的效果，當然有很多方法，我們這裡只利用內聯元素的特性來實現，來說明內聯元素的對齊原理，點我看例項。
先來看例項中的第一個，我們將box元素設定為inline-block水平，然後使用text-align: center讓其水平居中，(base元素中x用來輔助觀察父容器的基線位置，實際應用中不應該存在)，然後將box的text-align屬性設定為vertical-align: middle。emm...，然而並沒有垂直居中，這是為什麼哪？
這裡我們首先要知道vertical-align: middle是相對於誰來對齊，前面的文章也提到過，vertical-align: middle是會將元素的中心點與父容器基線向上1/2x-height的位置對齊。在我們第一個例子中，隨著我們設定vertical-align的值，父容器的基線位置在不停的變化。由於我們要實現垂直居中的效果，所有我們需要父容器的的基線能夠在容器的中央。
現在我們需要使用一個附中元素將父容器的基線撐開，這裡使用父容器的:after偽元素來做一個輔助元素，具體看例項的第二個設定其高於父容器一致，並設定其veritcal-align: middle。這樣父容器的基線就會在容器垂直正中央偏下1/2x-height的位置，box的中心線與基線加上1/2的位置對齊，正好在中央。現在垂直居中已經實現了。
但是我們這裡還有一個問題，仔細觀察會發現該box元素水平並沒有完全水平居中。給輔助元素設定了1px寬度和背景顏色後我們很容易看出問題原因，這是由於內聯元素間的間隙造成的。要解決這個間隙，我們使用最簡單的方法，設定父容器的font-size: 0，最後我們的水平垂直居中效果如例項中第三個所示。
總結
到這篇文章為止，關於內聯元素幾個比較重要的屬性以及內聯元素對齊的知識也差不多講完了，可能裡面還有一些很細節的部分沒有說到，這就要大家以後多多發揮google的功效了。
初始學習css，感覺css是一個非常簡單的東西，一天就能用css寫出一些網頁效果。但當慢慢深入的時候，會發現這是一個非常非常複雜的東西，這才是真正實踐了什麼叫”入門容易，精通難“。這是我自己學習css到現在一個最大的感受。總之，css學習之路還有很長，前端之路學習之路還有很長。當真正能夠獨立解決並解釋所有別人提出的所以前端方面的問題，或許是前端無敵吧。又寫了些廢話，突然有感而發，這裡與諸君共勉之~，共同努力。原文連結