图标对齐与视觉重心：为什么你的图标看起来不齐

把一批图标全部设成 24×24、顶格对齐，结果看上去还是有的偏大、有的偏高、有的偏左——这不是代码写错，是人眼按「视觉重量」而不是包围盒判断对齐。

本文目录

• 几何相等 ≠ 视觉相等
• 基线、留白与光学中心
• 用一张测试页快速验收
• 什么时候该换图，而不是调 CSS
• 垂直对齐里最容易被忽略的半像素

几何相等 ≠ 视觉相等

同样 24×24 的框里，正方形几乎填满，圆形上下左右都留空，三角形更集中。要让三者看起来一样大，圆形和三角形需要略微超出（overshoot）几何边界。多数成熟图标库已经内置了这层补偿，所以跨库混排特别容易露馅。

• 圆形、三角形通常要比方形外扩一点才显等大
• 挑图时按视觉大小对齐，不要只看 width/height
• 尽量从同一套库里取，补偿规则才一致

基线、留白与光学中心

带文字的按钮里，图标要按文字的 x-height 做视觉居中，而不是按行高的几何中心；纯数字或大写字母旁的图标常需要上移 1px。成排图标要检查四周留白是否一致——很多库把主体放在 24 网格的 2px 内边距里，另一些顶到边，混用就会显得参差。

• 与文字混排时按视觉中心微调，别死守 align-items:center
• 统一 keyline（安全区）与内边距
• 同排图标用同一画布与同一留白规则

用一张测试页快速验收

把整套图标放进同一行，下面垫 24×24 的网格线，缩到实际使用尺寸看一遍；再分别放到深色底、16px、以及带文字的按钮里各看一遍。看不出来的问题，通常在这四种组合里会立刻冒出来。

• 同排检查大小与重心
• 深色底检查线宽与对比度
• 16px 检查细节是否糊
• 按钮里检查与文字的对齐

什么时候该换图，而不是调 CSS

如果某张图需要单独 margin-top: -1px 才齐，说明它和整套不是一套规则。用 CSS 逐个打补丁会让维护成本越来越高，更干净的做法是换一张同库的图。详情页标了来源，可以按来源快速筛齐。

垂直对齐里最容易被忽略的半像素

很多「看着差一点」其实来自半像素：24 网格里的 1px 描边居中画在坐标上，渲染时会跨两个物理像素；再叠上行高不是整数倍的文字基线，图标就会比文字高或低半像素。用 flex 居中只能保证盒子对齐，保证不了笔画对齐。真机上确认后，可以对整套图标统一做一次 0.5px 的位移补偿，但不要逐个打补丁——逐个补说明当初选的图标不是一套。

• 描边居中会产生半像素边界
• 行高与基线不是整数时更容易看出偏移
• 要补偿就整套统一补，别逐张调
• 真机截图比设计稿更能暴露问题

常见问题

← 返回全部使用指南　·　许可与使用常见问题 →