默认注音在汉字上方（ruby-position: over），需下方时设ruby { ruby-position: under; }；必须配合font-size、line-height和white-space: nowrap才能确保正确显示与对齐。
ruby-position 控制注音在汉字上方还是下方
默认情况下，rt 内容显示在汉字正上方（ruby-position: over），但部分场景需要放在下方（比如日文训读、或避免与上一行文字重叠）。直接在 ruby 元素上设置即可：
-
ruby { ruby-position: under; }—— 注音移至汉字下方，适用于竖排或特殊排版需求 -
ruby { ruby-position: over; }—— 显式声明上方（虽是默认值，但建议写明，防止 CSS 重置干扰） - 不支持该属性的旧浏览器（如 IE11）会忽略，降级为 inline 流式渲染，此时
rp就起作用了
rt 字体大小和垂直偏移必须靠 CSS 显式控制
浏览器不会自动缩小 rt 的字号或调整其垂直位置；若不设 font-size 和 line-height，拼音会和汉字一样大、挤在一起甚至被截断。
-
rt { font-size: 0.5em; }—— 推荐值，确保拼音视觉上明显小于基字 -
ruby { line-height: 1.8; }—— 父容器行高至少 1.6–2.0，否则拼音顶部易被上一行内容裁切 - 不要用
vertical-align调整rt，它对ruby子元素无效；真正起效的是ruby-position+ 行高 + 字号组合
white-space: nowrap 是防止字-音错位的关键
当一行汉字较多、容器宽度受限时，浏览器可能在 rb 和 rt 之间换行，导致“汉”字配上了“zì”的拼音。这不是 bug，而是流式布局的自然行为。
-
ruby { white-space: nowrap; }—— 强制整组 ruby 不折行，保障字音一一对应 - 若需整段多字注音且允许换行，应按词/字粒度分别包裹
ruby，而非把整句塞进一个ruby标签里 - 禁用
display: block或float在ruby上，否则语义断裂，屏幕阅读器无法识别注音关系
ruby-align 对齐方式容易被忽略但影响细节体验
ruby-align 默认值是 center，但某些浏览器（尤其 Safari 早期版本）未严格实现，导致拼音左右偏移、看起来没居中。
-
ruby { ruby-align: center; }—— 显式声明，提升跨浏览器一致性 - 可选值还有
start/end/space-between，但中文场景基本只需center - 注意：该属性只对
ruby容器生效，不能写在rt上 - 搭配
text-align: center在父容器使用，可进一步稳定整体水平定位
最常被跳过的其实是 line-height 和 white-space: nowrap 的组合；光调 font-size 不改行高，拼音照样被截；光设 nowrap 不控行高，长文本会撑开整行间距。这两项不配对处理，注音就很难“稳住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
