vertical-align

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Values for inline elements

  • vertical-align 的默认值是 baseline
  • inherited: no, 不从父元素继承

Parent-relative values

These values vertically align the element relative to its parent element:

  • baseline Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.

  • sub Aligns the baseline of the element with the subscript-baseline of its parent.

  • super Aligns the baseline of the element with the superscript-baseline of its parent.

  • text-top Aligns the top of the element with the top of the parent element's font.

  • text-bottom Aligns the bottom of the element with the bottom of the parent element's font.

  • middle Aligns the middle of the element with the baseline plus half the x-height of the parent.

  • <length> Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.

  • <percentage> Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed. 百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于 line-height 计算的。
    举个简单的例子,如下 CSS 代码:

    css
    1{
    2  line-height: 30px;
    3  vertical-align: -10%;
    4}

    实际上,等同于:

    css
    1{
    2  line-height: 30px;
    3  vertical-align: -3px;    /* = 30px * -10% */
    4}

Line-relative values

The following values vertically align the element relative to the entire line:

  • top Aligns the top of the element and its descendants with the top of the entire line.

  • bottom Aligns the bottom of the element and its descendants with the bottom of the entire line.

For elements that do not have a baseline, the bottom margin edge is used instead.

Values for table cells

  • baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>) Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

  • top Aligns the top padding edge of the cell with the top of the row.

  • middle Centers the padding box of the cell within the row.

  • bottom Aligns the bottom padding edge of the cell with the bottom of the row.


The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
我终于懂了 vertical-align 的场景:

  • 使行内元素盒模型与其行内元素容器垂直对齐
  • 垂直对齐表格单元内容

注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效:不能用它垂直对齐块级元素

baseline 是怎么样的?

下图基线所指向的就是 baseline, 默认元素的基线同基准元素(取行高最高的作为基准)的基线对齐。

关于图片默认间隙的问题?

下面 demo 的第四个例子,因为 vertical-align 默认值是 baseline, 图片的最下边源被认为是基线所在的位置

一些问题记录

第二、四、七、九个例子Line-relative values top, bottom 等值相对整行垂直对齐,不会使接下来的元素向他们的基线对齐,即不会修改基线。
第一、三、六、八个例子Parent-relative values 会使接下来的元素向他们的基线对齐,即会修改基线。

codepen
1<iframe height="900" style="width: 100%;" scrolling="no" title="vertical-align demo" src="https://codepen.io/powerfulyang/embed/vYjbLbY?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
2  See the Pen <a href="https://codepen.io/powerfulyang/pen/vYjbLbY">
3  vertical-align demo</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
4  on <a href="https://codepen.io">CodePen</a>.
5</iframe>

line-height

line-height的默认值是normal,同时还支持数值、百分比值、长度值、继承。请看下面的表格:

描述
normal默认。设置合理的行间距。
number设置数字,此数字会与当前的字体尺寸相乘来设置行间距,即number为当前font-size的倍数。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
inherit规定应该从父元素继承 line-height 属性的值。

line-height 继承情况下

不同属性下的 line-height 最终的计算方式比较如下。

设置方式line-height计算后的line-height子元素继承的line-height
inherit父元素的line-height值不用计算父元素的line-height值
length20px不用计算20px
%150%自身font-size (14px) * 150% = 21px继承父元素计算后的line-height值 21px,而不是150%
normal假如为1.2自身font-size (16px) * 1.2 = 19.2px继承1.2,line-height = 自身font-size(32px) * 1.2 = 38.4px
纯数字1.5自身font-size (14px) * 1.5 = 21px继承1.5,line-height = 自身font-size(32px) * 1.5 = 48px

所以,在实际开发中, 我们一般设置行高的值为 `纯数字是最推荐的方式,因为其会随着对应的 font-size 而缩放,排版效果良好。

line-height 与内联元素垂直居中

行高等于容器高,外加 vertical-align: middle 可以设置单行文本的垂直居中