text-align: right 是唯一标准、可靠且兼容性好的右对齐方法，html5 已废弃 align 属性，它仅作用于块级容器内的行内内容，flex/grid 下需用 justify-content 或 justify-self 控制子元素位置。

text-align: right 是唯一标准、可靠且兼容性好的做法，其他方式要么已废弃，要么行为不可控。

为什么不能用 align="right"

HTML5 已彻底移除 align 属性（包括 <td align="right">、<code><p align="right"></p> 等），W3C 验证器会报错，现代浏览器渲染不一致：Chrome 可能忽略，Firefox 直接不解析，Outlook 邮件客户端则可能优先取它导致样式失控。
更麻烦的是，align 在 <table> 上控制浮动，在 <code><td> 上却管文字对齐，语义混乱，极易误用。 <h3> <code>text-align: right 必须加在正确的位置

它只对块级容器内可渲染的行内内容生效，不是“让元素右移”，而是“让内容在其内部靠右站队”。所以：

• ✅ 正确：<div style="text-align: right;">文字</div>、<td style="text-align: right;">¥123.45</td>
• ❌ 无效：<table style="text-align: right;"><td>文字</td></table> —— text-align 不作用于 <table> 容器本身 <li>⚠️ 注意：<code><span></span> 是行内元素，直接加 text-align: right 无效；必须先设 display: block 或用 <div> 包裹 <h3>Flex/Grid 布局下 <code>text-align: right 为什么没反应

  一旦父容器设了 display: flex 或 display: grid，子元素就脱离常规文本流，text-align 只影响子元素**内部的文字**，不再控制子元素位置。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • 想让整个子元素右对齐：用 justify-content: flex-end（Flex）或 justify-self: end（Grid）
  • 想让子元素内部文字右对齐：仍可用 text-align: right，但需确保该子元素是块级且含文本内容
  • 常见陷阱：给 <div> 设 <code>display: flex 后，再对它的 <p></p> 加 text-align: right 是有效的；但对 <p></p> 本身设 display: flex，那它里面的文字就不再受 text-align 影响了

    数字右对齐时小数点错位怎么办

    纯 text-align: right 对齐数字，不同位数的小数点会错位，因为默认字体非等宽。解决方法很简单：

    • 加 font-family: monospace 或 font-family: "Courier New", monospace
    • 更推荐语义化写法：<td class="numeric">¥123.45</td> + .numeric { text-align: right; font-family: monospace; }
    • 响应式场景下注意：小屏时长数字可能贴边溢出，建议搭配 white-space: nowrap 或 overflow-x: auto
    真正容易被忽略的，是 text-align 的作用边界——它从不移动元素，只排布内容；而一旦布局模式切换（比如加了 flex），它的生效逻辑就完全变了。别猜，打开开发者工具看 computed styles，确认最终生效的值和来源。