文本的垂直对齐

css垂直对齐

IFC 布局规则:

在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始
盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐.

每个行盒会产生一个 IFC,IFC 决定了内部的布局规则,并且 IFC 之间不会相互影响内部的布局.

该 p 元素包含了两行,每行有一个 line-box,而每个 line-box 的高度是由他内部所有子元素(inline-box)的高度得出的.

由于 line-box 中的垂直对齐方式是与各线位置息息相关的.
所以我们所需要知道的就是每个子元素高度和各线位置是如何决定的.

让我们来看下面这两张图.
以 Catamaran 字体为例
css垂直对齐

emsize:1000: 这个是一个相对值,在实际是由字符时会将其进行缩放,此处我们将 fontsize 设为 100px,则整个 line-box 缩放为 1/10.

Ascent 和 Dscent:

这两个值之和就是 emsize,用于决定字符的渲染区域,决定了基线和 text-top 的位置.

content-area:
可以将其理解为背景色会作用到的区域.他由 Win Ascent 和 Win Descent 之和决定.

virtual-area: content-area 加上 line Gap 就是 virtual-area 的高度.
leading: line-gap/2 加在 content-area 两端,所以 content-area 总是在 virtual-area 的中间.

capital-height: 大写 X 的高度
x-sizeing: 小写 x 的高度,用于确定中线位置

我们可以看到,红色部分就是我们模拟的 virtual-area,黄色部分是 content-area,蓝色部分是模拟的 em-square 的大小也就是 font-size 的大小,大写和小写的 X 分别是 Cap 和 x-sizing

有了这些数据,每个子元素的各线位置就都能确定了.
顶线和底线是 virtual-area 的顶部和底部.

content-area 在 virtual-area 中间,其底部加上 descent 就是基线的位置.

在基线之上加上 x-sizing/2 就是中线的位置.

流程图:

知道了 line-box 中每个元素的 line-height 和对齐方式后我们就可以知道 line-box 的高度了.

顶线,底线与行高:

line-box 的高度为 auto 时,其高度由子元素撑开
line-box 的顶线在顶线最高的子元素上,底线在底线最底的子元素上,这也就是为什么图片下面老是有空隙了
行高就是顶线到底线的距离

基线: line-box 的基线在子元素都基线对齐时的基线位置
中线: 在基线的基础上加上该 line-box 所属的元素的 font-size 决定的 x-sizing/2 得到该 line-box 中线的位置.

流程图

再来看看这个例子
由于第一个 span 设置 vertical-align:middle,关于父元素中线对齐,line-box 的 virtual 被撑大了,此时红色 span 中线与父元素中线对齐,且父元素高度由红色 span 撑开,父元素的中线和基线从下方移动到中间.

1.一行中元素的垂直对齐方式由父元素的四线位置和子元素的垂直对齐方式决定

2.父元素的顶线和底线位置由顶线最高子元素和底线最高子元素的对齐方式决定

3.父元素的中线和基线位置由自己顶线底线和自己的 font-size 决定

3.子元素的四线位置由自己的 font-size 和 font-family 决定

流程图: