对齐、平衡与光学修正

先理解这个概念

共享的对齐线能减少视线来回跳动。文本通常按文字起点对齐，数值通常按末位对齐。不同形状的视觉重量不同，三角形图标即使几何居中，也可能需要小幅光学调整。

对齐让用户沿稳定的参考线扫描，不必每一行重新找起点。几何居中按外框计算，光学居中按视觉重量判断，两者可能不同，例如播放三角形或带留白的图标。应先建立可复用的对齐规则，再对少数视觉重心特殊的元素做小幅修正。

记住这三个原则

1. 01

   尽量复用少数对齐线，避免每块内容独立定位。

2. 02

   比较数值时右对齐并考虑等宽数字。

3. 03

   先几何对齐，再在真实尺寸下做小幅光学校正。

实际设计时，分三步做

1. STEP 01

   为页面确定主要文本起点、内容边界和操作列。检查标题、正文与列表是否共享需要共享的参考线。

2. STEP 02

   按比较任务选择对齐方式：文字通常左对齐，金额常右对齐；混合字号文本优先检查基线。

3. STEP 03

   在规则成立后检查图标和按钮的视觉重心，把必要修正记录到组件，而不是逐页任意移动。

一个容易理解的例子

用户更容易逐列比较量级与差异。

.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

适用边界与取舍

所有东西都左对齐也不是通用答案。居中适合短促且独立的提示，右对齐适合某些数值比较；长正文居中则常使行起点不稳定。判断依据是阅读方式。