图标与文字的光学对齐：视觉重量比几何居中更重要

把图标和文字放进同一行，按坐标居中往往看起来"图标偏下"或"文字偏上"。这不是眼睛有问题，而是几何中心不等于视觉中心。

为什么会偏

文字有字身框（em box）、基线和 x-height 三套参考线，汉字又基本填满字身框，视觉重心略高于几何中心；而多数图标的视觉质量分布在上半部或主体偏上，直接按 bounding box 居中就会错位。

三种稳的做法

• 按 x-height 对齐。让图标高度约等于文字的小写字母高度（中文相当于字身框的 80% 左右），比让图标等于字号更协调。
• 光学微调。居中后再把图标上移 1-2px，绝大多数组合立刻就"正"了。1px 的差别肉眼能感知，不要嫌麻烦。
• 用容器统一。给图标一个固定尺寸的容器，容器内按视觉重心摆放，整站复用同一个容器，避免每处都手调。

按钮里的图标

按钮内"图标 + 文字"的组合，常见问题是左内边距比右内边距看起来更空。原因是文字末尾有天然的字距留白，而图标没有。解法是把图标的左侧间距比右侧少 2-4px，视觉上反而更均衡。这类补偿在按钮、标签、面包屑里通用。

怎么验证

放大到 400% 截图，用十字参考线压住文字的中线，看图标主体是否在同一条线上；再缩小到 100% 正常尺寸看整体观感。只有两个尺度都舒服，才说明真的对齐了。

本文首发于 izzsj.com，作者保留全部权利。未经书面授权，禁止任何形式采集、转载与镜像；转载请注明来源并保留原文链接。