vertical-align

Published by powerfulyang on May 30, 2023

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

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

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

  Copy Code

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

  实际上，等同于：

  css

  Copy Code

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

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.

• 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, 默认元素的基线同基准元素（取行高最高的作为基准）的基线对齐。

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

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

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的默认值是normal，同时还支持数值、百分比值、长度值、继承。请看下面的表格：

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

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

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