字母x與「居中」

字母x ？

《css世界》中提到：「我們這裡的字母x就是26個英文本母中的x。由於自身形態的一些特殊性，這個小小的不起眼的字母擔當大任，在css世界中扮演了乙個重要的角色。」

筆者在這兩天寫乙個專案中遇到了「居中」的困惑：我發現**段

li

失效！

經過一番查證，發現：vertical-align屬性只對行內元素有效，對塊元素無效

但我很快想到：有時候為什麼寫了line-height也會出錯、或者說反而會出錯呢？

有時使用display:inline-block會導致verticle-align:middle失效。為何？因為display：inline-block會導致line-height有偏差

這又是什麼原理？

在各種內聯相關模型中，凡是涉及垂直方向的排版或者對齊的，都離不開最基本的——基線。

例如，line-height行高的定義就是兩基線的間距，verticle-align的預設值就是基線；其它中線頂線一類的定義也離不開基線。

基線也延伸出了很多其它的概念：

比如字母基線、懸掛基線、表意基線

而【基線】的定義就離不開本文的主角「x」。

字母x的下邊緣（所在直線）就是我們所說的基線

上面所說內容當然和開頭的「問題」沒有直接關係，但是它確實引出了下面的一系列概念：

要更深層次的了解字母x，或者說基線與居中有何關係，那就不得不說css中的乙個概念——x-height

它指的是字母x的高度！

通俗的講，x-height就是指小寫字母x的高度，術語描述就是基線和等分線（也叫「中線」）之間的距離：

為什麼要說這個？

css中有些屬性值的定義其實就和這個x-height有關，最典型的代表就是verticle-align: middle;。這裡的middle是中間的意思。注意：跟上面所說【中線】不是乙個意思（圖中baseline上面那根就是median——中線）。

在css中，middle指的是基線往上1/2 x-height高度的位置。我們可以近似理解為「字母x的交叉點所在位置」。

由此可見，verticle-align: middle 並不是絕對的垂直居中對齊 —— 我們平時看到的middle效果只是一種近似效果。原因很簡單：不同字型在行內盒子中的位置是不一樣的。

事實上，「微軟雅黑」是乙個字元比較下沉的字型——所有字元的位置都比其它字型要偏下一點。

也就是說，「微軟雅黑」字型中的字母x的交叉點是在容器中分線的下面一點。而此時我們就不難理解為什麼verticle-align不是相對容器的中分線對其的了。

讓我們回到開頭的一段**，我們此時可以很容易想到：先將其變為行內

li

發現沒啥用。。。

然後我們「恍然大悟」，想到：這是缺少「參照」的表現啊！

而對於li列表，適合用什麼布局呢？——table：

li

其實line-block失效的原因有很多：比如你再元素外層又包裹了div，對div設定display、本來就是line…這裡是恰好碰上li罷了

這樣就解決了。

我們可能都聽過em、rem、px、rpx，但是這個ex是什麼鬼。。。

說起這個，他可能就會很自豪：畢竟是連ie6都支援的屬性單位。

ex是css中的乙個相對單位，指的就是小寫字母x的高度。沒錯，就是指x-height。

而且——不受字型和自號影響的內聯元素的垂直居中對其效果！

我們都知道，內聯元素預設是基線對齊的，而基線就是x的底部，而1ex就是乙個x的高度。設想一下，假如（標）的高度就是1ex，將其作為背景顯示，這時如果（背景）居中，那豈不是圖示和文字「天然」垂直居中對齊？而且不受字型和自號的影響。

yunxiaomeng

然後就對齊了 —— 完全沒有verticle-align的出場機會嘛！

當然，關於「居中偏差」的問題我們也可以用偽元素解決，比如這裡：

li:after