价格符号与数字应基线对齐以确保易读性，推荐使用 align-items: last baseline（现代浏览器）或合并为单文本节点（兼容旧版），并统一等宽字体、line-height: 1 及清除干扰样式。
价格符号（如 ¥、$）和数字需要视觉上“坐”在同一水平线上，关键不是让它们看起来居中或底部对齐，而是让符号的基线和数字的基线自然重合——这符合排版逻辑，也最易读。
用 align-items: baseline 搭配内联结构
把价格符号和数字放在同一个内联上下文中，比如都包裹在 <span></span> 里，且不打断行内流：
- 符号和数字使用相同字体、字号、
line-height: 1，避免因字体度量差异导致错位 - 避免给符号或数字额外设置
vertical-align、margin-top或transform - 容器设为
display: flex; align-items: baseline;，但仅当子项是多个独立块级元素时才需此步；若符号+数字同属一个文本节点，flex 容器本身可省略
分离式结构（如符号单独标签）用 last baseline
当 ¥ 和 “99.00” 分属不同 HTML 元素（例如 <span class="symbol">¥</span><span class="amount">99.00</span>），baseline 可能失效——因为浏览器默认按首行基线对齐，而符号往往比数字“浮高”。此时应升级为：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器启用
align-items: last baseline（Chrome 119+、Firefox 117+、Safari 17.4+ 支持） - 确保两个子元素都有可渲染的文本内容（空元素不参与基线计算）
- 配合
gap控制间距，避免用margin干扰基线定位
统一字体与排版细节
即使对齐方式正确，字体选择也会破坏效果：
- 优先使用等宽字体（如
font-family: 'SF Mono', 'Consolas', monospace），数字和符号宽度一致，基线更稳定 - 设置
line-height: 1并清除所有margin、padding，尤其注意span默认无边距，但某些 reset.css 可能重置了vertical-align - 避免混用不同字体族的符号（比如用图标字体显示 ¥），应使用 Unicode 字符或系统字体原生支持的货币符号
兼容旧浏览器的降级方案
若需支持不识别 last baseline 的环境：
- 用
@supports (align-items: last baseline)包裹新写法，旧版回退到align-items: center+ 手动微调transform: translateY()（仅限像素级修正） - 更稳妥的做法：将符号和数字合并为单个文本节点，例如
<span>¥99.00</span>，由字体自身处理基线 - 禁用
font-variant-numeric: tabular-nums可进一步保证数字高度统一，减少因比例数字（proportional figures）引起的视觉偏移
