text-align: right 是让块级元素内文字靠右显示最直接可靠的方式，仅影响行内内容对齐而不改变元素布局，对 span 等行内元素无效，需包裹于块级容器或设 display: block；表格单元格需单独设置，数字列还应配合 tabular-nums 和等宽字体；若要使整个块级元素右对齐，则需用 margin-left: auto、float 或 Flex 布局。
text-align: right 是让文字靠右显示最直接、最可靠的方式，其他方法（如 float、margin-left: auto）适用场景不同，不能替代它。
用 text-align: right 控制块级元素内文字对齐
这是标准做法，适用于 p、div、h1～h6 等块级容器内的文字。它只影响“行内内容”的水平对齐位置，不改变元素自身在页面中的布局。
- 内联写法最快速：
文字靠右
- 类名复用更规范：
+文字靠右
-
span是行内元素，单独加text-align: right无效；必须包裹在块级容器里，或显式设display: block - 若文字仍左对齐，大概率是 CSS 优先级被覆盖——打开浏览器开发者工具的 “Computed” 面板，看最终生效的
text-align值是不是right
表格单元格（td/th）右对齐必须作用于单元格本身
给 table 或 tr 设置 text-align: right 是无效的，因为 td 默认不继承该属性。数字列尤其要注意这点，否则小数点会错位。
- 正确写法：
123.45 td.amount { text-align: right; } - 表头
th默认居中，也要单独声明：th.amount { text-align: right; } - 仅靠
text-align: right不足以让数字纵向对齐；需配合font-variant-numeric: tabular-nums和等宽字体（如SFMono-Regular） - 避免前后空格：
123.45
让整个块级元素（如 div）在父容器中靠右，不是用 text-align
如果目标是把一个盒子“推到右边”，而不是盒子里的文字靠右，那 text-align 就不对路了。这时候要改元素自身的定位或外边距。
- 传统方式：
clear: both），且会脱离文档流 - 现代推荐：
- Flex 布局更灵活：父容器设
display: flex; justify-content: flex-end;，子元素自动右对齐 -
text-align: right对img标签本身没用；想让图片右对齐，得控制它的父容器（div）或用margin-left: auto
真正容易被忽略的是语义和上下文：右对齐不是视觉问题，而是排版意图问题。金额、时间、编号列适合右对齐，但姓名、描述、状态列通常不该右对齐；框架重置样式、字体特性、空格处理这些细节，往往比写一行 text-align: right 更耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
