vertical-align用于对齐内连元素,其block属性取值可能为:inline、inline-block、inline-table。
(1)单个元素的baseline位置
-
文字:字母abcdefhiklmnorstuvwxzx的下边沿
-
图片:margin 底边
-
一个 inline-block 元素,如果里面没有内联元素,或者
overflow
不是visible
,则该元素的基线就是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线。
(2)行框的baseline位置
行内框的高度:元素行高指定的高度。行框的高度:子元素中行高最大值
-
如果其中有 baseline 对齐的元素,那么行框的 baseline 就是这些元素的 baseline。
-
如果没有,给里面添加个匿名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一半的位置。