css中的 vertical-align与line-height作用详解

作用对象：行内元素（inline/inline-block）或表格单元格内容
核心功能：控制元素在行框内的垂直对齐方式
常用取值 ：
- baseline（默认）：基线与父元素基线对齐
- top：元素顶部与行框顶部对齐
- middle：元素中线与父元素基线+1/2 x-height对齐
- bottom：元素底部与行框底部对齐
- 数值值：2px（上移）、-10%（下移）

示例（图标与文本对齐）：

css 复制代码

.icon {
  vertical-align: middle;
  width: 20px;
}
.text {
  vertical-align: middle;
}

作用对象：块级容器
核心功能：定义行框的最小高度
特性：
l i n e − h e i g h t = 字体大小 + 上半间距 + 下半间距 line-height = 字体大小 + 上半间距 + 下半间距 line−height=字体大小+上半间距+下半间距
- 无单位值（推荐）：1.5（相对于当前字体大小）
- 固定值：24px
- 百分比：150%

文本垂直居中实现：

css 复制代码

.box {
  height: 50px;
  line-height: 50px; /* 单行文本垂直居中 */
}

行框高度计算：

html 复制代码

<div style="line-height: 30px;">
  <span style="font-size: 40px; vertical-align: top">A</span>
  <span style="vertical-align: bottom">B</span>
</div>

实际行框高度=最高元素的顶部到最低元素的底部距离

数值计算示例 ：

当字体大小为16px，line-height为1.5时：
16 p x × 1.5 = 24 p x 16px × 1.5 = 24px 16px×1.5=24px

实际行框高度可能因vertical-align调整而变化

图片底部间隙：

css 复制代码

img {
  vertical-align: bottom; /* 或 top/middle */
  /* 或 */
  display: block;
}

多行文本居中：

css 复制代码

.container {
  display: flex;
  align-items: center;
  line-height: normal; /* 重置单行设置 */
}

精确对齐控制：

css 复制代码

.icon-text {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

使用开发者工具显示基线：

css 复制代码

* {
  background: linear-gradient(#fff 94%, red 94% 96%, #fff 96%);
}

可视化line-height区域：

css 复制代码

p::before {
  content: '';
  display: inline-block;
  height: calc(var(--line-height) - 1em);
  background: rgba(0,255,0,0.2);
}