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

展开阅读全文

没有更多推荐了,返回首页