--- title: vertical-align posterId: 46026 tags: - 只是一个笔记 - css - 我以前居然没发现 --- > 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

, 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
  {
    line-height: 30px;
    vertical-align: -10%;
  }
  ```

实际上，等同于：

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

### 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` 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐[块级元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements)。

### baseline 是怎么样的?

下图`基线`所指向的就是 baseline, 默认元素的基线同**基准元素**（取行高最高的作为基准）的基线对齐。
![source protected](47809)

### 关于图片默认间隙的问题？

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

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

```codepen
<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">
  See the Pen <a href="https://codepen.io/powerfulyang/pen/vYjbLbY">
  vertical-align demo</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
  on <a href="https://codepen.io">CodePen</a>.
</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值 |
| length | 20px | 不用计算 | 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 可以设置单行文本的垂直居中**

</article></body></html>

标签: 行内元素

笔记(1)

深入理解 vertical-align 与 line-height