text-align: right 仅对块级元素和表格单元格生效，对内联元素无效；在 flex/grid 布局中只影响内部文字对齐，不影响子元素位置；需注意继承、display 类型、RTL 兼容及响应式断点覆盖。
text-align: right 为什么没生效
直接给文字容器加 text-align: right 却不居右，大概率是元素类型或继承关系出了问题。该属性只对块级元素（如 <div>、<p>、<h1>）和表格单元格生效；对纯内联元素（如 <span>、<a>）无效，除非它被设为 display: block 或 display: inline-block。
- 检查目标元素是否是块级上下文——用浏览器开发者工具看 computed styles 中的
display值 - 避免在
<span>上直接写text-align，它默认是inline，此时需配合display: inline-block - 父容器若设置了
text-align: center，子元素未显式覆盖时会继承，导致覆盖失败
table 中 td/th 的 text-align:right 行为差异
在表格中，text-align: right 对 <td> 和 <th> 默认就有效，但要注意：它只控制单元格内**行内内容的水平对齐**，不影响单元格自身在 table 中的位置（那是 align 属性或 margin 的事）。另外，如果单元格里嵌套了 flex 容器或设置了 display: flex，text-align 就完全失效。
-
<td style="text-align:right">123</td>正常右对齐数字 - 若
<td>内有<div style="display:flex">，则内部文字对齐由 flex 控制，text-align被忽略 - 不要混用过时的
align="right"属性（HTML4 遗留），它在 HTML5 中已废弃，且优先级低于 CSS
响应式场景下 text-align:right 的断点陷阱
用媒体查询切换对齐方式时，常见错误是只写了 text-align: right 却忘了重置其他断点下的值，导致小屏仍右对齐，阅读体验变差。尤其在 RTL（从右向左）语言环境或混合 LTR 内容中，硬编码 right 可能违反可访问性原则。
- 移动端通常更适合左对齐（LTR 文本），建议默认
text-align: left，仅在特定宽度以上切右对齐 - 使用
text-align: end替代right更健壮，它会根据direction自动适配（LTR → 右，RTL → 左） - 避免在
@media (max-width: 768px)中只写text-align: right，应明确写出所有断点的值，防止层叠污染
/* 推荐写法：兼顾 LTR/RTL */
.container {
text-align: end;
}
@media (max-width: 768px) {
.container {
text-align: start; /* 小屏回归自然起始方向 */
}
}Flex 或 Grid 布局中 text-align:right 失效的原因
一旦父容器启用 display: flex 或 display: grid，它的子元素就脱离了常规文本流，text-align 不再控制子项位置——它只影响子项**内部的文字**对齐。想让整个子元素右对齐，得用 justify-content: flex-end（Flex）或 justify-self: end（Grid）。
立即学习“前端免费学习笔记（深入）”；
- 错误：
<div style="display:flex"><span style="text-align:right">Text</span></div>——text-align只作用于span内部，但span本身还是左贴边 - 正确：给父
div加justify-content: flex-end，或给span加margin-left: auto - 若确实要右对齐文字而非元素，确保目标元素是块级且未被 flex/grid 的布局逻辑覆盖
真正容易被忽略的是：text-align 是一个“内容对齐”属性，不是“容器定位”属性。它永远只管盒子里的文字、图片等内联内容怎么排，不管盒子自己在哪。混淆这点，就会反复陷入“写了却没反应”的调试循环。
