text-align无效的根本原因是未作用于块级容器，它只对块级元素（如）生效，用于控制其内部行内内容的水平对齐；对等行内元素直接设置无效。
text-align 不管用？先确认文字是否在块级容器里
很多情况下你以为 text-align: center 没生效，其实是文字所在的元素没被当作块级上下文处理。比如直接给 <span></span> 或 <em></em> 设 text-align，它压根不响应——这个属性只作用于**块级容器**，用来控制其内部行内内容的水平对齐。
常见错误场景：
- 把
text-align加在<span class="title"></span>上，而没给它的父<div> 或 <code><p></p>设置宽度和显示模式 - 子元素用了
display: inline-block或display: flex，覆盖了默认块行为，导致text-align失效 - 如果想让整个子项（比如含标题+副标的
<div>）在网格轨道中垂直居中 → 用 <code>align-self: center（单个项）或align-items: center（整个容器） - 如果想让标题和副标在它们共同父容器内上下对齐（比如标题大号、副标小号，但视觉上需要底部或顶部对齐）→ 把父容器设为
display: flex，再用align-items: flex-end或align-items: baseline - 用独立元素包裹不同语言文本，分别设置
writing-mode，避免混在同一个块里 - 禁用
text-align-last做主对齐，它只是微调最后一行/列，不能解决方向冲突 - 基线对齐大概率失准，优先用
flex+align-items: center或grid+align-self控制整体位置，再靠padding或margin手动修正视觉偏差 - 统一用无单位数值（如
line-height: 1.4），它会继承并乘以当前font-size，保持比例一致 - 若需绝对对齐（比如所有文字底部严格踩同一条线），改用 Flex 布局嵌套：父容器
display: flex; align-items: flex-end，子元素自然底部对齐 - 避免在 Grid item 上同时设
height和line-height，显式高度会挤压内容，尤其字体放大时容易溢出或截断
正确做法：确保文字包裹在 <p></p>、<div> 这类天然块级元素中，再对其设 <code>text-align；若必须用 <span></span>，就让它父级是块级并承担对齐职责。
大标题+小副标混排时，vertical-align 为什么无效？
vertical-align 只对 inline、inline-block 和 table-cell 元素起作用，且它对齐的是“行框内的基线”，不是整个容器的垂直中心。Grid 子项默认是块级，所以直接在 Grid item 上写 vertical-align: middle 完全没反应。
真正该做的分两层：
别试图靠 line-height 去硬调不同字号的垂直位置，那会随字体度量变化失效，尤其在中文/蒙古文混排或变体字体下更不可靠。
Grid 中多语言混排（如中+蒙）对齐错位怎么办？
核心问题是书写模式（writing-mode）冲突。中文默认 horizontal-tb，蒙古文推荐 vertical-lr，二者混合时，text-align 的语义会翻转——比如 text-align: center 在垂直流里是“列居中”，不是“文字水平居中”。
安全做法：
特别注意：Chrome 和 Safari 对 writing-mode: vertical-lr 下 text-align: start/end 的解析仍有差异，测试时别只看一个浏览器。
font-size 变化后文字“飘”了，是 line-height 没配好
当同一 Grid 区域里有 font-size: 2rem 的标题和 font-size: 0.875rem 的说明文字，又都设了 line-height: 1.5，实际行高会按各自字号计算，造成视觉错层。这不是 Grid 的锅，是 line-height 的相对单位特性导致的。
解决思路：
最常被忽略的一点：不同字体的 ascent/descent 度量差异极大，思源黑体和 Noto Sans Mongolian 的基线位置根本不在同一物理高度，纯靠 CSS 对齐总有几像素误差——这时候留点余量比强行像素对齐更可靠。
