vertical-align 和 line-height | 垂直居中

今天在寫樣式時，icon和文字都進行了垂直居中的處理，可是icon並無垂直居中，後來發現因爲 line-height 和 vertical 一塊兒使用致使與預期樣式不一樣，特此對 vertical-align 總結進行！

---

vertical 支持不少屬性：

/*  關鍵字值  */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/*  <長度> 值  */
vertical-align: 10em;
vertical-align: 4px;
/*  <百分比> 值  */
vertical-align: 10%;
/*  全局值  */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

當 vertical-align 和 line-height 同時出現時出現樣式差別是因爲：vertical-align的百分比值不是相對於字體大小或者其餘什麼屬性計算的，而是相對於line-height計算的。

一、現象

Div內包裹一個img標籤，給div添加背景發現div下部分多出一部分留白空間，這個現象就是因爲vertical-align和line-height共同起做用的緣由。
對於內聯元素，vertical-align與line-height雖然看不見，但實際上「處處都是」！

二、幽靈空白節點

一個寬度爲0, 表現如同普通字符的看不見的 「節點」。
對於上面的問題，給文字添加一個白色背景，效果以下：
Vertical-align默認的對齊方式爲：baseline，也就是基線對齊。基線爲文字的下邊緣。
因此圖片與文字的下邊緣對齊，文字的高度是由行高決定。

解決方式

一、讓vertical-align失效

圖片默認是inline水平的，而vertical-align對塊狀水平的元素無感。所以，咱們只要讓圖片display水平爲block就能夠了，咱們能夠直接設置display或者浮動、絕對定位等
給img標籤添加display:block樣式，將img變爲塊級元素髮現問題消失了。

二、使用其餘vertical-align值

不用baseline，使用其餘的屬性值，好比：middle、top、bottom
lign屬性後空白節點消失。

三、修改line-height的值

下面的空隙高度，其實是文字計算後的行高值和字母x下邊緣的距離。所以，只要行高足夠小，實際文字佔據的高度的底部就會在x的上面，下面沒有了高度區域支撐，天然，圖片就會有容器底邊貼合在一塊兒了。
div { line-height: 5px; }

四、line-height爲相對單位，font-size間接控制

Font-size能夠間接改變line-height的值，也起到消除空白節點的做用。

五、垂直居中

當設置

div { line-height: 240px; }
img { vertical-align: middle; }

此時的頁面看似垂直居中，可是並無徹底垂直居中。middle中線位置(字符x的中心)並非字符內容的絕對居中位置。兩個位置的誤差就是圖片近似居中的誤差。
解決方案即：將空白節點也進行vertical-align:middle，可是直接操做不能實現，所以利用其餘的方式,即 font-size:0

div { line-height: 240px; font-size: 0; }
img { vertical-align: middle; }

此時的垂直居中也就是真正的垂直居中。
這種經過line-height定高，元素vertical-align:middle垂直居中的方法不只適用於現代瀏覽器，連IE7瀏覽器也是支持的。

六、一種很好的解決方式

div {
    display:flex;
    align-items:center;
}

align-items 屬性定義flex子項在 flex 容器的當前行的側軸（縱軸）方向上的對齊方式。