text-align是控制块级元素内行内内容水平对齐的css属性，仅作用于文字、img、span等，不改变容器位置；html的align属性已废弃，应统一使用css实现对齐。

text-align 是控制块级元素内文字水平对齐最直接有效的 CSS 属性，不是 HTML 标签本身的功能。所谓“用 HTML 标签控制对齐”，实际是混合了过时写法和现代实践的模糊说法——真正可靠、可维护、符合 HTML5 规范的做法，全部依赖 CSS。

为什么 align 属性不能乱用

像 <div align="center"> 或 <code><p align="right"></p> 这类写法在部分浏览器里看似有效，但属于 HTML5 废弃属性。W3C 验证器会报错；Chrome 和 Firefox 解析行为不一致；在 Flex/Grid 容器中完全失效；更严重的是，它和 text-align 冲突，调试时很难判断谁覆盖了谁。

常见错误现象包括：局部右对齐突然失效、嵌套结构中对齐“跳变”、响应式断点后文字挤到一边。

• 废弃属性仅作用于自身标签内部文本，无法影响子元素（比如 <div align="right"><span>xxx</span></div> 中的 <span></span> 不受控）
• 表格单元格（<td>）上写 <code>align 虽仍被支持，但优先级低于 CSS 的 text-align，且无法实现垂直对齐
• 对 <table> 写 <code>align="center" 实际触发的是浮动机制，不是真正的居中，宽度未设时行为不可预测

  text-align 适用场景与边界

  text-align 只作用于块级容器内的**行内内容**（文字、@@##@@、<span></span> 等），它控制的是这些内容在当前行框（line box）中的水平位置。关键点在于：它不改变容器自身位置，只调整内部排列。

  典型使用场景：

  • 段落居中：<p style="text-align: center;">正文</p>
  • 表单 label 右对齐（配合固定宽 input）：label { text-align: right; display: inline-block; width: 120px; }
  • 多列数据右对齐金额：td.amount { text-align: right; font-family: monospace; }（等宽字体防小数点错位）

  容易忽略的限制：

  

  html-deploy

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

  下载
  • text-align: justify 在中文下效果有限，浏览器不会自动断字，仅靠词间空格拉伸，易产生过大间隙
  • 对 display: block 子元素（如另一个 <div>）无效，除非显式设 <code>display: inline-block 或 display: inline
  • 在 flex 容器中，text-align 对主轴排列无影响，应改用 justify-content

  表格整体居中必须配 width

  想让整个 <table> 水平居中，只写 <code>style="margin: 0 auto;" 是不够的——它要求表格有明确宽度，否则 auto 无法计算左右 margin。

  正确做法示例：

  @@######@@

  其他可行方案：

  • 用父容器 flex 控制：<div style="display: flex; justify-content: center;"><table>...</table></div>（无需固定宽，推荐）
  • 用 inline-table + text-align：<div style="text-align: center;"><table style="display: inline-table;">...</table></div>

  注意：<colgroup></colgroup> 支持 text-align，但仅限该列所有单元格统一生效，不能单独控制某一行。

  vertical-align 不是给 <table> 用的 <p><code>vertical-align 常被误认为能“垂直居中整个表格”，但它只对 display 为 inline、inline-block 或 table-cell 的元素生效。也就是说，它适用于：

  • <td> 或 <code><th> 内部文字/图片的上下对齐（如 <code>vertical-align: middle）
  • 行内图片与文字基线对齐（vertical-align: baseline 或 top）

  错误用法示例：<table style="vertical-align: middle;"> —— 完全无效，<code><table> 默认是 <code>display: table，不接受 vertical-align。

  若需整个表格在页面中垂直居中，得靠父容器布局（如 flex 的 align-items: center 或 grid 的 place-items: center）。

  真正要控制对齐，核心就三条：文字内容用 text-align，容器定位用 margin 或 flex/grid，单元格内微调用 vertical-align。把这三者混着用、不看 display 类型、不设 width 就想居中，是绝大多数对齐问题的根源。

  A

  B