摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。

上一篇：《CSS世界》筆記二：盒模型四大家族
下一篇：《CSS世界》筆記四：流的保護與破壞

在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已。在這一篇博客（《css世界》第五章）中，張大大從深層次解釋了垂直對齊的原理，并為內聯元素的垂直對齊提供了最佳實踐。

（1）基線(baseline)：字母 x 的下邊緣(線)就是基線

（2）x-height：小寫字母 x 的高度，術語描述就是基線和等分線(mean line)(也稱作中線，midline)之間的距離

ascender height: 上行線高度
cap height: 大寫字母高度
median: 中線
descender height: 下行線高度

（3）middle線：vertical-align:middle; 中middle指的是基線往上1/2 x-height高度（近似垂直居中）

（4）單位ex：CSS中的一個相對單位，指的是小寫字母 x 的高度
用法：不受字體和字號影響的內聯元素的垂直居中對齊效果

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow.png) no-repeat center;
}

對于非替換元素的純內聯元素，其可視高度完全由 line-height 決定，通俗的說，純內聯元素的可視高度不受padding、margin、border 屬性的影響（這個我們在上一篇博客也有說明）

一個公式：行距 = line-height - font-size

上下行距分配規則：當行距為偶數時，上下行距平分；當行距為基數時，上邊距向上取整，下邊距向下取整；因為絕大多數字體都是偏下的

誤區：并非是line-height=height實現了單行文本的居中，line-height多帶帶作用即可實現

應用：利用line-height實現多行文本居中對齊

    
基于行高實現的...


/* 近似居中對齊 */
.box {
    width: 280px;
    line-height: 120px;
    background-color: #f0f3f9;
    margin: auto;
}
.content {
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    text-align: left;
    vertical-align: middle;
}

/* 絕對居中 */
.box {
    font-size: 0;
}
.box .content {
    font-size: initial;
}

原理：
近似居中：.box行高為120，.content行高為20，“幽靈空白節點”在.content前撐起了整個內容區域

絕對居中：在上面的基礎上，由于middle（基線往上1/2 x-height高度）為近似居中，由于x-height受到font-size的影響，font-size為0時可理解為絕對居中

line-height 的默認值是 normal，還支持數值、百分比值以及長度值

默認值normal在不同字體下的解析不同，因此在實際開發中一般會重置line-height

重點：

假設 font-size = 14px;

數值：line-height: 1.5; ==> line-height 計算值是 1.5*14px=21px

百分比值：line-height: 150%; ==> line-height 計算值是 150%*14px=21px

長度值：line-height:21px

乍一看，似乎 line-height:1.5、line-height:150%和 line-height:1.5em 這3種用法是一模一樣的，最終的行高大小都是和 font-size計算值，但是，實際上，line-height:1.5和另外兩個有一點兒不同，那就是繼承細節有所差別。如果使用數值作為 line-height 的屬性值，那么所有的子元素繼承的都是這個值;但是，如果使用百分比值或者長度值作為屬性值，那么所有 的子元素繼承的是最終的計算值

最佳實踐：基本上各大站點都是使用數值作為全局的 line-height 值

vertical-align 作用的前提條件是：只能應用于內聯元素以及display值為table-cell的元素，注意，浮動和絕對定位會讓元素塊狀化也會使vertical-align失效

四類屬性值：

線類，如 baseline(默認值)、top、middle、bottom;

文本類，如 text-top、text-bottom;

上標下標類，如 sub、super;

數值百分比類，如 20px、2em、20%等;

根據計算值的不同，相對于基線往上或往下偏移，到底是往上還是往下取決于vertical-align的計算值是正值還是負值，如果是負值，往下偏移，如果是正值，往上偏移

vertical-align:baseline 等同于 vertical-align:0

vertical-align的百分比：margin 和 padding 是相對于寬度計算的，line-height 是相對于 font-size 計算的，而這里的 vertical-align 屬性的百分比值則是相對于 line-height 的計算值計算的

（1）案例一：任意一個塊級元素，里面若有圖片，則塊級元素高度基本上都要比圖片的高度高

    


.box {
    border: 1px solid #ccc;
}
.box > img {
    height: 96px;
}

原因：間隙產生的三大元兇就是“幽靈空白節點”、line-height和vertical-align屬性；圖片前放置小寫的x，會發現圖片的基線是元素底部，與“幽靈空白節點”的基線（小寫x下邊緣）對齊；

解決方法：

圖片塊狀化：可以一口氣干掉“幽靈空白節點”、line-height和vertical-align

line-height:0;

font-size: 0;

干掉基線對齊：vertical-align的值為top、middle、bottom中的任意一個都是可以的

（2）案例二：使用text-align: justify;實現文字兩端對齊

text-align: justify;多用于文字排版，有一個非常重要的特性：不會對最后一行兩端對齊，因此單行文本時若要對齊需要人為換行

補充text-align: justify;的用法案例：

    姓名

    聯系方式


$font-size: 14px;
$line-height: 1.5;

.form {
    background-color: #eee;
    width: $font-size * 5 + 150px;
}
label {
    display: inline-block;
    text-align: justify;
    width: $font-size * 5;
    height: $font-size * $line-height;
    overflow: hidden;
    vertical-align: bottom;
    margin-right: 10px;
}
label:after {
    content: "";
    width: 100%;
    display: inline-block;
}

（3）案例三：使用text-align: justify;實現列表兩端對齊

為了讓最后一行也兩端對齊，需要使用占位元素實現換行

    
    
    
    
    
    
    


.box {
    text-align: justify;
}
.justify-fix {
    display: inline-block;
    width: 96px;
}

此時，元素底部有很大的間隙。產生的原因無非是vertical-align，因此我們會設置line-height:0;，但是并沒有真正解決問題，為什么？

一個 inline-block 元素，如果里面沒有內聯元素，或者overflow不是visible，則該元素的基線就是其 margin 底邊緣;否則其基線就是元素里面最后一行內聯元素的基線。

x-baseline


.dib-baseline {
    display: inline-block;
    width: 150px; height: 150px;
    border: 1px solid #cad5eb;
    background-color: #f0f3f9;
}

實際展示如下圖所示：

最終解決：

font-size: 0;

line-height: 0; 且在占位元素中添加空格 

一個 inline-block 元素，如果里面沒有內聯元素，或者 overflow 不是 visible， 則該元素的基線就是其 margin 底邊緣;否則其基線就是元素里面最后一行內聯元素的基線。

基于上面的理論，有下面幾個要點：

圖標高度和當前行高都是 20px

圖標標簽里面永遠有字符，可以借助:before 或:after 偽元素生成一個空格字符輕松搞定

圖標 CSS 不使用 overflow:hidden 保證基線為里面字符的基線，但是要讓里面潛在的字符不可見

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: url(sprite.png) no-repeat center;
    white-space: nowrap;
    letter-spacing: -1em;
    text-indent: -999em;
}
.icon:before {
    content: "3000";
}

利用之前提到的絕對居中的知識vertical-align:middle; font-size:0;

    



.container {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.container:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.dialog {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 14px;
    white-space: normal;
}

內聯元素各種線 & 行高計算及分配規則；

利用line-height如何實現多文本居中 & line-height 各屬性值區別

vertical-align取值對垂直對齊的影響及解決方式

justify 實現文字兩端對齊和列表兩端對齊

上一篇：《CSS世界》筆記二：盒模型四大家族
下一篇：《CSS世界》筆記四：流的保護與破壞