理解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一半的位置。