vertical-align:middle的深入理解

顶线,中线,基线与底线

众所周知,在 html 中一行包含这几条线,顶线,中线,基线和底线.

文本的垂直对齐

对于这四条线,css 给出了行内元素的四种垂直对齐方式,即顶部(top),中部(middle),基线(baseline),底部(bottom)

诶!这里大家肯定就发现问题了,怎么中线对齐根本不居中啊?要解决这个问题我们先要从一行的组成开始探索.

line-box

一行可以作为一个 linebox 来看待,line-box 中有如下区域.
line-height(virtual-area),font-size(content-area),cap(大写 X 的大小),x-height(小写 x 的大小)
注: cont-area 的大小与图片相等,因为他们都设置为 100px

line-height(virtual-area)是一行的高度,他决定了一行的顶线与底线

line-height

line-height 是该行的行高,它由顶线最高与底线最低的子元素决定,或者对父元素直接设置 line-height

content-area

字体是放在一个长宽都是 font-size 的盒子(content-area)中的,所以文字大小(cap)会比 font-size 稍小

注: 实际上 font-size 为 100px 的 content 盒子的大小与宽高为 100px 的块级元素的大小是相等的

一行各线的确定

行高:line-height 由顶线最高与底线最低的子元素给出,或者对父元素直接设置 line-height

顶线与底线: line-height 决定了顶线与底线的位置,

基线:由 line-height 减去 font-size/2 得到 leading,将分别放在上下使得 content-area 能够居中并且决定决定基线位置(如果图片时最高的子元素,底线位于最低的子元素的底线,基线在图片的底上)

中线:基线位置加上 x-height(小写 x 的高度)决定中线位置

middle 失效的答案

终于!我们明白给子元素设置 vertical-align:middle 为什么会失效了!其实 middle 并没有失效,只是中线的位置不对而已.首先行高和基线被图片和文字共同确定,在默认情况下,父元素的 font-size:1em 为 16px 所以 x-height/2 大概在 5px 左右,基线的高度上加 5px 后确定了中线位置,最后设置了中线对齐的子元素的中线与父元素的中线对齐.所以完全偏离了!

其他问题

图片下方空白的问题

我们在一行文字中插图图片,图片下方会空出一块这是为什么呢.一行的 line-height 是由高度最高元素的顶线到最低的底线决定的,图片没有底线,最低处将算到文字的底线处.

为什么给图片设置 vertical-align:middle 之后的文字反而会居中?

对相对较大的图片设置居中后,图片的中线将与父元素的中线对齐,由于父元素本身是由图片撑大的(底线间隙在文字移动后消失),此时父元素的中线就与图片中线重合.
由于父元素的 font-size 较小(默认 16px),其基线就在中下下方 8px 处,而字体的大小刚好就是 16px,这样字体的中线刚好与父元素中线重合,进而与图片中线重合

注意: 这个 linebox 确实变矮了!(底边间隙由于文字的上移消失)所以现在 x 相对图片绝对居中
总结

实用结论

子元素相对于父元素居中:

文字:对文字设置 line-height 等于父元素的 height
图片:对父元素设置 line-height 等于其 height,对图片设置设置 vertical-align:middle(有一定误差)
注: 垂直居中计算方式是根据 x-height也就是父元素的小写x的高度的,对图片其实根本不靠谱

文字相对于较大的图片居中:

对图片设置 vertical-align:middle

真正的图片相对父元素垂直居中

position: relative;
top: 50%;
transform: translateY(-50%);

1、position: relative;

理解：relative 是相对的意思，这里是相对于父元素

2、top: 50%;

理解：高度是 50%，指的是父无素的高度的 50%。

3、transform: translateY(-50%);

理解：向上移动自身元素高度的 50%。

弹性盒子中的垂直对齐问题

最近学习了弹性盒子,在容器中有一个属性是 align-items,决定了交叉轴上元素的排列方式.由于默认水平是主轴,垂直是交叉轴,这个属性多用来确定垂直方向的对齐方式.
align-items:baseline
所有元素都会对齐容器的基线,容器的基线是由基线位置距离交叉轴最远的元素决定的.
让我们来看这个例子.对于一个 div,在内部没有行内元素时,它的基线和底线位置都在 border 下,此时容器的基线由基线距离 cross-start(交叉线的起点) 最远的红色 div 决定

当我们对 div 中写入文本后,该 div 的基线位置变为文本的基线位置,此时容器的基线由基线距离 cross-start(交叉线的起点)最远的亚麻色和蓝色 div 决定