理解vertical-align

vertical-align用於對齊內連元素，其block屬性取值可能爲：inline、inline-block、inline-table。

（1）單個元素的baseline位置

1. 文字：字母abcdefhiklmnorstuvwxzx的下邊沿

2. 圖片：margin 底邊

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

              

 

           

（2）行框的baseline位置

行內框的高度：元素行高指定的高度。行框的高度：子元素中行高最大值

1. 如果其中有 baseline 對齊的元素，那麼行框的 baseline 就是這些元素的 baseline。

2. 如果沒有，給裏面添加個匿名inline-box元素x，以確定baseline

（3）vertical-aligin取值

     1. 相對於行框的基線放置元素的基線

 

• baseline: 元素的基線對齊行框的基線。

• sub: 元素的基線放置在行框基線的下面。

• super: 元素的基線放置在行框的基線的上面。

• <percentage> 元素的基線移動相對於行框的基線偏移，偏移量爲相對於父元素行高的百分比。

• <length>: 元素的基線相對於行框的基線偏移，偏移量爲length。

2. 相對於行框的外邊緣放置元素的外邊緣

• top： 元素行內框的頂部（行高頂端）對齊行框的頂部

• bottom： 元素行內框的底部（行高底端）對齊行框的底部

這兩個屬性最終呈現出的效果對父元素的行高、自己的行高值很敏感。注意，默認行內元素會繼承父元素的行高值。

可改變以下代碼中父元素、子元素行高值體驗。tip：爲了直觀，縮小子元素的行高，當縮小至和元素高度一樣，觀察。tip：改變元素高度發現元素位置並沒有變化。

<p class="parent">
    x
    <span class="top">top</span>
    <span class="bottom">bottom</span>
</p>

.parent {
    background-color: #ccc;
}
.top {
    vertical-align: top;
    line-height: initial;
}
.bottom {
    vertical-align: bottom;
    line-height: 50px;
}

3. 相對於行框的文本框放置元素的外邊緣

行框中文本框即文本內容的範圍，由字體、字體大小確定。

• text-top: 元素行內框的頂部（行高頂端）對齊行框的文本框的頂部

• text-bottom: 元素行內框的底部（行高底端）對齊行框的文本框的底部

改變如下例子中父元素的行高，可發現，元素相對x的上下偏移值並無變化，因爲相對的是行框的文本框的邊沿。

<p class="parent">
    x
    <span class="text-top">text-top</span>
    <span class="text-bottom">text-bottom</span>
</p>

.parent {
    background-color: #ccc;
    line-height: 70px;
}
.text-top {
    vertical-align: text-top;
    line-height: 40px;
}
.text-bottom {
    vertical-align: text-bottom;
    line-height: 30px;
}
 

tip: 如何確定行框的文本框的上下邊沿呢？該示例中，將父、子元素的行高、vertical-align屬性全部註釋掉，此時父元素的上下邊沿即爲行框的文本框的上下邊沿。然後設置子元素的vertical-align屬性、行高大小，體驗以下。

4. 相對於line box的基線放置元素的外邊緣

• middle: 元素行內框的頂部與底部的中點 對齊 相對於行框的基線上移x-height一半的位置。