vertical-align: baseline 对数字和单位不管用，是因为中英文字体基线位置不同且行框参考线不可控；推荐用 display: inline-flex + align-items: baseline 精准对齐。
为什么 vertical-align: baseline 对数字和单位不管用？
因为默认情况下，数字（如 99）和单位（如 元）是两个独立的内联元素，它们各自按字体自身的基线（baseline）对齐，而中文字体（如微软雅黑、PingFang SC）的基线位置通常比西文字体高，导致“99”下沉、“元”上浮，视觉上错位。
更关键的是：vertical-align 作用于行内元素的**行框上下文**，不是绝对定位；它参考的是整行中所有内联元素里「最高基线」和「最低底线」构成的隐式参考线——一旦混用中英文字体或字号不一致，这个参考线就不可控。
用 display: inline-flex + align-items: baseline 最稳
把价格容器设为 inline-flex，就能让子元素在 flex 容器内真正按基线对齐，且不受父行内上下文干扰。这是目前兼容性好（Chrome 21+/Firefox 20+/Safari 6.1+）、语义清晰、不易破布局的方案。
- 给外层
<span class="price"></span>设置display: inline-flex和align-items: baseline - 把数字和单位分别包在子
<span></span>里，避免文本节点直接参与对齐计算 - 确保两者使用同一字体族（或至少都 fallback 到支持 baseline 的字体），例如统一用
font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB" - 避免给单位加
font-size缩放（如0.8em），否则会破坏 baseline 对齐；如需缩小单位，改用transform: scale(0.8)并设transform-origin: left bottom
<span class="price"> <span class="price-amount">99</span> <span class="price-unit">元</span> </span>
.price {
display: inline-flex;
align-items: baseline;
gap: 2px; /* 可选：控制数字与单位间距 */
}
.price-amount {
font-size: 24px;
line-height: 1;
}
.price-unit {
font-size: 14px;
transform: scale(0.85);
transform-origin: left bottom;
}不用 Flex？试试 line-height + vertical-align 组合微调
如果必须保持纯内联流（比如老项目不能改 DOM 结构），可手动校准：固定行高，再用 vertical-align 把单位下拉一点。但这是“经验性修复”，不同字体/字号需反复试值，维护成本高。
立即学习“前端免费学习笔记（深入）”；
- 给整个价格文本设统一
line-height（如line-height: 1.2），消除行高浮动影响 - 把单位包裹在
<span></span>中，设vertical-align: -0.15em（负值往下拉，正值往上顶） - 该偏移量不是固定值：
14px字号可能需要-0.12em，12px可能要-0.18em；建议用 Chrome DevTools 的em拖动实时调试 - 禁用单位的
font-feature-settings或text-rendering: optimizeLegibility，某些渲染优化会干扰 baseline 计算
容易被忽略的细节：字体加载和 font-display
如果用了自定义字体（如阿里图标字体或品牌定制字体），且设置 font-display: swap，那么在字体加载完成前，浏览器会先用系统字体渲染，此时 baseline 位置可能突变，造成页面闪动。这不是对齐逻辑问题，而是字体切换的副作用。
- 对价格类文本，建议在关键字体上设
font-display: optional或block，确保 baseline 稳定 - 或者，为价格容器预设一个
min-height（略大于最大可能行高），防止重排抖动 - 不要依赖
font-size-adjust：它只对字体 x-height 做补偿，不解决中英文 baseline 错位本质
真正麻烦的从来不是怎么写那几行 CSS，而是当设计师说“这里看起来不对”时，你得立刻判断是字体问题、flex 容器没生效、还是单位用了伪元素生成的内容——这些地方一漏，调半天也对不齐。
