vertical-align 垂直对齐属性

封面图 • 2026-01-06 • Html/Css

`vertical-align` 是 CSS 中用于控制 **行内元素**（如 `<span>`、`<img>`、`<input>` 等）在 **行框（line box）中的垂直对齐方式** 的属性。

---

## 一、基本概念

- `vertical-align` 仅对 **行内元素** 或 **表格单元格（td, th）** 生效。
- 它不会影响块级元素（如 `<div>`、`<p>`）的垂直对齐，除非它们被设置为 `display: inline` 或 `display: inline-block`。

---

## 二、常用值

| 值 | 描述 |
|----|------|
| `baseline` | 默认值。元素的基线与父元素的基线对齐。 |
| `top` | 元素顶部与父元素的顶部对齐。 |
| `middle` | 元素中部与父元素的中部对齐。 |
| `bottom` | 元素底部与父元素的底部对齐。 |
| `sub` | 元素作为下标对齐。 |
| `super` | 元素作为上标对齐。 |
| `text-top` | 元素顶部与父元素文本的顶部对齐。 |
| `text-bottom` | 元素底部与父元素文本的底部对齐。 |
| `percentage` | 百分比值，相对于字体大小。例如：`vertical-align: 50%` |
| `length` | 具体长度值，如 `vertical-align: 10px` |

---

## 三、使用示例

### 示例 1：图片和文字垂直对齐

```html
<p>
  <img src="icon.png" style="vertical-align: middle;" alt="Icon">
  这是一段文字
</p>
```

> 如果没有设置 `vertical-align`，图片默认会和文字的基线对齐，可能看起来有点“下沉”。

---

### 示例 2：调整行内元素的垂直位置

```css
.inline-element {
  vertical-align: top;
}
```

```html
<div style="height: 100px; line-height: 100px;">
  <span class="inline-element">文本</span>
</div>
```

> 此时 `.inline-element` 会与父容器的顶部对齐。

---

## 四、常见应用场景

- 调整图片与文字的垂直对齐。
- 在表格中对齐单元格内容。
- 在导航栏中对齐图标和文字。

---

## 五、注意事项

- `vertical-align` 不会影响元素的布局位置，它只是改变元素在行内的垂直位置。
- 对于块级元素，可以使用 `display: inline-block` 后再使用 `vertical-align`。
- 在 Flexbox 或 Grid 布局中，`vertical-align` 不起作用，应使用其他方式对齐。

---

## 六、与 `line-height` 的区别

- `line-height` 控制的是 **行高**，即一行文字的高度。
- `vertical-align` 控制的是 **元素在行高中的垂直位置**。

---

如果你有具体的使用场景或问题，欢迎继续提问！