如何用CSS实现价格数字和单位基线对齐？-css教程-PHP中文网

vertical-align: baseline 对数字和单位不管用，是因为中英文字体基线位置不同且行框参考线不可控；推荐用 display: inline-flex + align-items: baseline 精准对齐。

如何用css实现价格数字和单位基线对齐？

为什么 `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+）、语义清晰、不易破布局的方案。

给外层设置 display: inline-flex 和 align-items: baseline
把数字和单位分别包在子里，避免文本节点直接参与对齐计算
确保两者使用同一字体族（或至少都 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 把单位下拉一点。但这是“经验性修复”，不同字体/字号需反复试值，维护成本高。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给整个价格文本设统一 line-height（如 line-height: 1.2），消除行高浮动影响
把单位包裹在中，设 vertical-align: -0.15em（负值往下拉，正值往上顶）
该偏移量不是固定值：14px 字号可能需要 -0.12em，12px 可能要 -0.18em；建议用 Chrome DevTools 的 em 拖动实时调试
禁用单位的 font-feature-settings 或 text-rendering: optimizeLegibility，某些渲染优化会干扰 baseline 计算