css - 再遇 vertical-align

1. vertical-align 属性值概览

vertical-align 仅对行内元素(inline-block、inline)生效,块元素无效,他是确定子元素的基线相对于父元素基线的位置(垂直方向上的对齐方式),其属性值有:

  1. baseline
  2. top
  3. bottom
  4. text-top
  5. text-bottom
  6. middle
  7. sub
  8. super
  9. 数字

2. 准备

2.1 字体度量

字体度量.png

首先,我们先了解一下字体度量,如上图所示。图中小写字母 x 的底部为 baseline, x 的高度为 x-height,ascender与大写字母的顶部有一定的间距,descender与小写字母 p, y 的底部对齐,这些设置与字体的设置有关,具体的需要去了解字体是怎么做出来的,理解 vertical-align 的各个属性的基础是需要知道这些线的位置。

2.2 line-box

每一行称为一条Line Box,它又是由这一行的许多inline-box组成,它的高度可以直接由line-height决定,line boxes的高度垂直堆叠形成了containing box的高度,就是我们见到的div或是p标签之类的高度了。

3. vertical-align 各个属性的表现一览

下图中第一排为文字内容的表现,第二排为图片的表现,如果这个图让你一眼就看明白了各个属性的具体表现,那么后续的内容均可忽略。黑色的外框是父元素内容区域的边界因为没有设置 margin 和 padding,这个边界也是line-box的边界。

下图中各个颜色的线的意义(从上到下数):

  • 蓝色线(第一条)- ascender
  • 绿色线(第二条)- x-height
  • 红色线(第三条)- middle
  • 橙色线(第四条)- baseline
  • 灰色线(第五条)- descender
vertical-align 各个属性的表现一览.png

4. vertical-align 各个属性详述

在父元素中写入 Xxjpf 作为参考,并在此基础上画出5条参考线,父元素的 baseline 是 x 的底部的线条

4.1 baseline

对齐位置:子元素的 baseline 与父元素 baseline 对齐,即子元素中 x 的底部与父元素中 x 的底部对齐,图片元素的 baseline 以及有宽度和高度的空盒子的baseline均为盒子底部。

如图:

baseline.png
图片-baseline.png

4.2 sub

对齐位置:子元素的 baseline(字母x 的底部)与父元素文字的 descender (灰线)对齐

如图:

sub.png
图片-sub.png

4.3 super

对齐位置:子元素的 baseline(字母x 的底部)与父元素文字的 x-height (绿线)对齐

如图:

super.png
图片-super.png

4.4 top

对齐位置:子元素盒模型的顶部,与 line-box 的顶部对齐。

如图:

top.png
图片-top.png

4.5 middle

对齐位置:子元素盒模型的中线位置与父元素 基线(字母x 的底部)+ 半个x的高度的位置(红线)对齐

图例中,为了方便查看,我们在子元素的中间画了一条白色的线,可以看到这条白线是与父元素穿过 x 中心的红线对齐。图片上的黑色的线就是图片的中间位置(是在ps上自己画上去的),也可以看到该黑线与穿过 x 中心的红线对齐。同时也可以看出 middle 与 baseline 的差别,文字内容的差距比较小,但图片可以明显看出是不一样的。如图:

middle.png
图片-middle.png

4.6 bottom

对齐位置:子元素盒模型的底部,与 line-box 的底部对齐

如图:

bottom.png
图片-bottom.png

4.7 text-top

对齐位置:子元素盒模型的的顶部与父元素字体的 ascender 线(蓝线)对齐

如图:

text-top.png
图片-text-top.png

4.8 text-bottom

对齐位置:子元素盒模型的的顶部与父元素字体的 descender 线(灰线)对齐

如图:

text-bottom
图片-text-botton.png

4.9 数字

对齐位置:以 baseline 为中心线上下移动指定像素量,正数为向上移动,负数为向下移动

子元素 baseline 与父元素 baseline 对齐的前提下,正数(eg:2px)代表相对于baseline 位置上移指定的像素,负数(-2px)代表相对于 baseline位置 下移指定的像素

5. 总结

vertical-align 只对行内元素生效,

有些属性需要找准子元素的基线,如:baseline, sub, super

还有一些属性需要确认子元素的盒模型的范围,如:top, middle, bottom, text-top, text-bottom

属性值 对齐位置
baseline 子元素的 baseline 与父元素 baseline 对齐
sub 子元素的 baseline 与父元素 x-heignt (绿线对齐)
super 子元素的 baseline 与父元素 descender(灰线)对齐
top 子元素盒模型顶部与父元素 line-box 顶部对齐
middle 子元素盒模型的中线与父元素 baseline + 半个 x 的高度位置(红线)对齐
bottom 子元素盒模型底部与父元素 line-box 底部对齐
text-top 子元素盒模型的顶部与父元素 ascender 线(蓝线)对齐
text-bottom 子元素盒模型的底部与父元素 descender 线(灰线)对齐
数字 以 baseline 为中心线上下移动指定像素量,正数为向上移动,负数为向下移动

6. 思考

如果子元素的内容有换行,如何确定baseline?

你可能感兴趣的:(css - 再遇 vertical-align)