ruby标签默认居中对齐拼音，但实际错位90%因line-height、font-size、ruby-align未协同设置：需统一设ruby{line-height:1.2}、rt{font-size:0.6em;ruby-align:center}，并避免空格、全角标点及rp干扰。
ruby 标签本身默认就居中对齐拼音，但“多音字标注后拼音偏左/偏右/上下错位”，90% 是因为样式没协同，不是标签写错了。
为什么 ruby 里的 rt 看起来没居中
浏览器对 ruby 的渲染依赖三个关键样式联动：父级 ruby 的 line-height、rt 的 font-size、以及是否显式设了 ruby-align: center。漏掉任一环，视觉上就“不居中”。
-
ruby继承了外层段落的line-height: 1.8，而rt又只设了font-size: 0.5em，结果拼音被上下挤压，实际垂直中心偏移 - 没写
ruby-align: center，部分 Android WebView 或旧版 Safari 会回退到左对齐 - 多音字本身不影响对齐，但如果你用
pypinyin生成时把「重」标成chóng、又手动改成zhòng却没同步更新rt宽度（比如加了空格或声调符号），也会导致水平偏移
rt 字体大小和行高必须配对设
不能只调 font-size 或只调 line-height，得一起压住：
- 统一设
ruby { line-height: 1.2; }——这个值足够紧凑，又不会让拼音贴到汉字上 -
rt必须用font-size: 0.6em（不是50%，iOS Safari 对百分比缩放不一致） - 加上
ruby-align: center显式声明，避免某些 WebView 忽略默认行为
ruby {
line-height: 1.2;
}
ruby rt {
font-size: 0.6em;
ruby-align: center;
}
多音字标注本身不影响对齐，但结构要干净
拼音是否正确、是否带声调，不影响 rt 的渲染位置；真正影响对齐的是 HTML 结构是否合规、有无冗余字符。
- 别在
rt里加空格或全角标点，比如比更容易错位 - 带声调的拼音（如
ā）是单个 Unicode 字符，pypinyin默认输出normal模式不带声调，要用style=Style.TONE才能生成，否则你手动补声调却忘了更新字体宽度适配，就会撑开 - 如果用了
rp兼容标签（如），确保rp的font-size和visibility不干扰布局——建议设rp { font-size: 0; visibility: hidden; }
浏览器兼容性差异最容易被忽略
Safari 在字号小于 14px 时可能把 rt 渲染得略偏上；Android WebView 5.x 以下版本压根不支持 ruby-align。这些不是 bug，是已知限制。
- 测试时务必在真机 Safari 和主流安卓 WebView 上看效果，不能只信 Chrome 预览
- 如果必须兼容老 WebView，用
position: relative+top微调rt是唯一可靠方式，但会失去语义化优势 - 多音字场景下，别指望浏览器自动识别上下文——拼音是你自己选的，
ruby只负责把它摆正
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
