基线对齐：让文字和图标“看起来齐”的那门细节功夫基线对齐：让文字和图标“看起来齐”的那门细节功夫在做 UI 的时候，我

基线对齐：让文字和图标“看起来齐”的那门细节功夫

在做 UI 的时候，我们经常遇到一种“明明对齐了但看起来不齐”的情况：

图标和文字放在一行，图标总像是飘着或下沉了一点
不同字号的文字放一起，视觉上像“高低不平”
按钮里的 icon + 文本，怎么调 padding 都不舒服

很多时候，问题不在于你没对齐，而在于你没对“基线”（Baseline）。

这篇文章会把基线对齐讲清楚：它是什么、为什么重要、在 Web/CSS 里怎么用、常见坑怎么躲。

1. 什么是“基线”（Baseline）

在排版里，基线可以理解为：一行文字“站着”的那条隐形线。
大部分字母（比如 a、e、n）会“坐”在这条线上，而像 g、p 这种有下行部件的字母会“掉”到基线下面。

你可以把它想成小学写字本上的那条线：字不一定都一样高，但它们的“落脚点”一致。

关键点：

基线不是元素的底边（bottom）
基线和字体度量（font metrics）强相关
不同字体/字号的基线位置不同，但浏览器可以把它们对齐

2. 为什么“基线对齐”比“居中对齐”更自然

很多人第一反应是 align-items: center;。
但center 对齐是几何对齐，而人眼对一行内容的感知往往是排版对齐。

举个典型场景：左边图标 + 右边文字

center 对齐：图标中心对文字盒子中心
baseline 对齐：图标“落脚点”跟文字基线对齐

当文字字号变大、字体换了、行高不同，center 对齐更容易出现“看着不齐”。

经验结论：
同一行里只要有文字参与，默认优先考虑基线对齐，会更“像排版”，更稳。

3. CSS 里怎么做基线对齐

3.1 Flex 布局：`align-items: baseline`

.row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

这会让同一行内的 flex items 的基线对齐。

注意：

对齐的“基线”来自每个 flex item 内部的第一行文本（first baseline）
如果某个 item 没文本，或者是 replaced element（比如 img），它的基线规则会比较特殊（下面会讲）

3.2 Grid 布局：`align-items: baseline` / `align-self: baseline`

Grid 也支持 baseline，但各浏览器实现细节可能略有差异。一般在组件里，Flex 更常见。

3.3 Inline/inline-block 的天然基线对齐

如果你用的是 display: inline-block;，它默认就会按基线对齐。
这也是为什么“图片底下总有一条缝”的经典 bug 会出现：img 作为 inline 内容时，会给基线留空隙（用于字母下行部件）。

4. 图标/图片为什么总是对不齐？

4.1 `img` 的基线和“底部留缝”

img（以及很多 replaced elements）参与 inline 排版时，默认会以基线对齐，但它的基线往往表现为“底部边缘附近”，再加上行高空间，就会出现底部缝隙或视觉偏移。

常见解决：

img, svg {
  vertical-align: middle; /* 或 baseline/top/bottom 视情况 */
}

或者直接把图标变成 flex item，由 flex baseline 控制。

4.2 SVG 图标更推荐的做法

如果你是图标 + 文本组合，强烈建议：

图标用 svg（内联或 icon font 也行）
外层用 flex
用 baseline 对齐
必要时给图标一个微调（这在真实项目里很常见，不丢人）

.icon {
  width: 16px;
  height: 16px;
  transform: translateY(1px); /* 微调 0~2px 很常见 */
}

为什么需要微调？
因为不同图标的视觉重心不同、字体的 x-height 不同，“数学上的 baseline 对齐”不一定等于“视觉上的舒适对齐”。

5. 基线对齐的常见坑

坑 1：flex item 没有文本，baseline 对齐不生效或很怪

如果某个 item 只是一个纯容器（里面没有文本第一行），它的 baseline 可能会退化成某种边缘对齐，结果整行就漂了。

解决思路：

让对齐基准的元素内部有文字（哪怕是隐藏文本不推荐）
或者把“需要对齐的那层”单独包一层，确保 baseline 来自文字那层
或者对没有文字的 item 用 align-self 单独处理

坑 2：行高（line-height）过大导致“看着不齐”

行高决定了文字盒子高度，但基线位置不一定在盒子正中。
如果你把 line-height 设得很大，再用 center 对齐，就更容易“看起来不齐”。

建议：

文本和图标混排时，优先 baseline
控制合理的 line-height（比如 1.2~1.6 视字号和字体而定）

坑 3：不同字体/中英混排导致基线差异

中文字体和英文字体混用、fallback 字体切换、数字字体不同，都可能影响基线与视觉重心。

应对策略：

关键 UI 字体尽量统一（尤其按钮/表单）
数字显示可用 font-variant-numeric（比如 tabular-nums）提升稳定性
必要时组件级微调（icon translateY、padding）

6. 实战建议：什么时候用 baseline，什么时候用 center？

优先用 baseline：

icon + 文本在一行（按钮、标签、菜单项）
不同字号文本同一行（标题 + 数值、强调词）
表格/列表中需要“像排版一样齐”的场景

优先用 center：

两个都是“块状视觉元素”（比如头像 + 圆点状态）
没有文字参与，或者文字只是次要（比如纯图标按钮）
你追求的是几何居中（比如图标在圆形容器中）

一句话总结：
有字就想 baseline；没字就想 center；不舒服就微调。

7. 一个推荐的“图标+文本”组件模板

你可以把它当成项目里通用的模式：

.inline-with-icon {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.inline-with-icon .icon {
  width: 1em;
  height: 1em;            /* 跟随字号缩放 */
  transform: translateY(0.08em); /* 轻微下压，更贴基线 */
}

优点：

1em 让图标自动跟着字体大小变化
baseline 让整体更像“文字的一部分”
translateY 用 em 做相对微调，字号变了也更稳

结语：对齐不是“数学问题”，而是“视觉问题”

基线对齐本质上是在借用排版系统的规则，让 UI 更自然、更舒服。
而当规则解决不了视觉差异时，微调就是工程的一部分——别害怕那 1px，它常常是质感的来源。

基线对齐：让文字和图标“看起来齐”的那门细节功夫