摘要：但實質(zhì)上，只要是內(nèi)聯(lián)元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設(shè)置為設(shè)置為總結(jié)講解了的各類屬性值及其效果起作用的前提是內(nèi)聯(lián)元素與都是同時作用在內(nèi)聯(lián)元素上的

vertical-align用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align是不起作用的。

vertical-align的屬性值可以歸為以下4類：

線類，如 baseline、top、middle、bottom；

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

上標(biāo)下標(biāo)類，如 sub、super；

數(shù)值百分比類，如 10px、1em、5%；

baseline，baseline為vertical-align的默認(rèn)值，其意思是指基線對齊，所謂基線，指的是字母x的下邊緣，具體可看前文深入理解css之line-height有講解到，不懂的小伙伴建議先看看這篇文章。我們來看個例子，代碼如下：

.box {
    width: 100px;
    line-height: 100px;
    border: 1px solid #ccc;
}

    文本

效果如下：

由于baseline是默認(rèn)值，所以可以不用寫。.box的line-height為100px，這其實是給“strut”設(shè)置的（不懂strut概念的可以看看前面的文章深入理解css盒子模型，簡單點說就是每一個行框盒子都有一個看不見的節(jié)點，該節(jié)點繼承了line-height），因此.text對齊于該節(jié)點的基線（可以想象成這個看不見的節(jié)點有一個字母x，而.text就是跟這個字母x的下邊緣對齊）

關(guān)于baseline，有一個需要注意的地方就是inline-block元素，如果一個inline-block元素，里面沒有內(nèi)聯(lián)元素，或者overflow不是visible，則該元素的基線是其margin底邊緣；否則其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。例子如下：

.text {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}

    文本
    

效果如下：

top，對于內(nèi)聯(lián)元素，指的是元素的頂部和當(dāng)前行框盒子的頂部對齊；對于table-cell元素，指的是元素的頂padding邊緣和表格行的頂部對齊。例子如下：

.box {
    width: 100px;
    line-height: 100px;
    border: 1px solid #ccc;
}
.top {
    line-height: normal;
    vertical-align: top;
}

    文本

效果如下：

bottom，跟top類似，將頂部換成底部即可。

middle，這個屬性值用得比較多。對于內(nèi)聯(lián)元素指的是元素的垂直中心點與行框盒子基線往上1/2x-height處對齊，簡單點說就是字母x的中心位置對齊；對于table-cell元素，指的是單元格填充盒子相對于外面的表格行居中對齊?；旧纤凶煮w中，字母x的位置都是偏下一點的，font-size越大偏移越明顯，因此，字母x中心的位置不是行框盒子的中心，也就是說vertical-align只能實現(xiàn)近似垂直居中對齊。

text-top，指的是盒子的頂部和父級內(nèi)容區(qū)域的頂部對齊。

text-bottom，指的是盒子的底部和父級內(nèi)容區(qū)域的底部對齊。

例子如下：

.box {
    width: 300px;
    line-height: 100px;
    border: 1px solid #ccc;
    font-size: 20px;
}
.f12 {
    font-size: 12px;
}
.f16 {
    font-size: 16px;
}
.f20 {
    font-size: 20px;
}
.text-top {
    line-height: normal;
    vertical-align: text-top;
    width: 100px;
}

    12px
    16px
    20px
    

效果如下：

所謂內(nèi)容區(qū)域，可以看成是鼠標(biāo)選中文字后高亮的背景色區(qū)域，上面的例子中，由于父元素設(shè)置的是20px，所以圖片的vertical-align設(shè)置text-top的時候，就可以看成是跟子元素為20px元素的內(nèi)容區(qū)域頂部對齊。

上標(biāo)和下標(biāo)對應(yīng)著兩個標(biāo)簽super和sub，super在上面，sub在下面，這兩個屬性值在數(shù)學(xué)公式和化學(xué)表達(dá)式中用得比較多，平時我們開發(fā)幾乎用不到，也沒啥好講的。

vertical-align是支持?jǐn)?shù)值的，并且兼容性也非常好，但大部分開發(fā)人員卻不知道vertical-align支持?jǐn)?shù)值。對于數(shù)值，正值表示由基線往上偏移，負(fù)值表示由基線往下偏移。而百分比則是基于line-height來計算的，百分比用得比較少，因為line-height一般都是開發(fā)人員給出的，這時候數(shù)值就可以精確定位元素，不需要再使用百分比再去計算一遍。使用數(shù)值的代碼如下：

.box {
    width: 300px;
    line-height: 100px;
    border: 1px solid #ccc;
    font-size: 20px;
}
.num {
    line-height: normal;
    vertical-align: 20px;
}

    文本

效果如下：

vertical-align起作用是有前提條件的，這個前提條件就是：只能應(yīng)用于內(nèi)聯(lián)元素以及display值為table-cell的元素。在css中，有些css屬性是會改變元素的display值的，例如float和position: absolute，一旦設(shè)置了這兩個屬性之一，元素的display值就是變?yōu)閎lock，因此，vertical-align也就失去了作用。下面這段代碼這樣寫就是錯的：

   span {
        float: left;
        vertical-align: middle; /* 錯誤，該行代碼無效 */
   }

另外，更多人遇到的是以下這種無效的情況：

.box {
    height: 200px;
}
.box > img {
    height: 100px;
    vertical-align: middle;
}

其實，不是vertical-align無效，而是前面所說的“strut”的影響，由于.box沒有設(shè)置line-height，所以“strut”的line-height就非常小，比圖片的高度小很多，vertical-align: middle沒法發(fā)揮作用。這時給.box一個比較高的line-height，就會看到vertical-align起作用了：

.box {
    height: 200px;
    line-height: 200px;
}

前面講了，vertical-align的百分比值是根據(jù)line-height來計算的。但實質(zhì)上，只要是內(nèi)聯(lián)元素，這兩個元素都會同時在起作用。如下例子：

.box {
    line-height: 32px;
}
.box > span {
    font-size: 24px;
}

    文本

效果如下：

從代碼上看，好像.box的高度會是32px，但實質(zhì)上.box的高度會比32px還要高。原因是"strut"繼承了line-height: 32px，span也繼承了line-height: 32px，但兩者的font-size不一樣，這就導(dǎo)致了"strut"的font-size比較小，而span的font-size比較大，也就是說它們的基線不在同一位置上，"strut"偏上一點，而span默認(rèn)又是基線對齊，為此，span總體會往上移以便跟"strut"基線對齊，.box元素就是這樣被撐高了。而解決方案可以有以下幾種：

span元素不使用基線對齊，可以改為top對齊

span元素塊狀化

line-height設(shè)置為0

font-size設(shè)置為0

講解了vertical-align的各類屬性值及其效果

vertical-align起作用的前提是內(nèi)聯(lián)元素

vertical-align與line-height都是同時作用在內(nèi)聯(lián)元素上的