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

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

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

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

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

上標下標類，如 sub、super；

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

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

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

    文本

效果如下：

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

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

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

    文本
    

效果如下：

top，對于內聯元素，指的是元素的頂部和當前行框盒子的頂部對齊；對于table-cell元素，指的是元素的頂padding邊緣和表格行的頂部對齊。例子如下：

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

    文本

效果如下：

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

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

text-top，指的是盒子的頂部和父級內容區域的頂部對齊。

text-bottom，指的是盒子的底部和父級內容區域的底部對齊。

例子如下：

.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
    

效果如下：

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

上標和下標對應著兩個標簽super和sub，super在上面，sub在下面，這兩個屬性值在數學公式和化學表達式中用得比較多，平時我們開發幾乎用不到，也沒啥好講的。

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

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

    文本

效果如下：

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

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

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

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

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

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

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

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

    文本

效果如下：

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

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

span元素塊狀化

line-height設置為0

font-size設置為0

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

vertical-align起作用的前提是內聯元素

vertical-align與line-height都是同時作用在內聯元素上的