• 检查目标元素是否是块级上下文——用浏览器开发者工具看 computed styles 中的 display 值
• 避免在 上直接写 text-align，它默认是 inline，此时需配合 display: inline-block
• 父容器若设置了 text-align: center，子元素未显式覆盖时会继承，导致覆盖失败

table 中 td/th 的 text-align:right 行为差异

在表格中，text-align: right 对 和 默认就有效，但要注意：它只控制单元格内**行内内容的水平对齐**，不影响单元格自身在 table 中的位置（那是 align 属性或 margin 的事）。另外，如果单元格里嵌套了 flex 容器或设置了 display: flex，text-align 就完全失效。

• 123 正常右对齐数字
• 若 内有
  ，则内部文字对齐由 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）。


HyperWrite
AI写作助手帮助你创作内容更自信
下载

立即学习“前端免费学习笔记（深入）”；

• 错误：
  Text
  —— text-align 只作用于 span 内部，但 span 本身还是左贴边
• 正确：给父 div 加 justify-content: flex-end，或给 span 加 margin-left: auto
• 若确实要右对齐文字而非元素，确保目标元素是块级且未被 flex/grid 的布局逻辑覆盖

真正容易被忽略的是：text-align 是一个“内容对齐”属性，不是“容器定位”属性。它永远只管盒子里的文字、图片等内联内容怎么排，不管盒子自己在哪。混淆这点，就会反复陷入“写了却没反应”的调试循环。