html5中align属性已被彻底移除，必须用css的text-align和vertical-align实现单元格对齐；text-align作用于行内内容，需设在td/th上；vertical-align仅对table-cell和行内元素有效，推荐用flex布局实现可靠垂直居中。

HTML表格单元格对齐必须用CSS，align属性已废弃

直接说结论：align 属性在 HTML5 中**不是“不推荐”，而是被标准彻底移除**。即使浏览器仍能解析 <td align="center">，它也属于无效标记，在 W3C 验证器中报错，邮件客户端（如 Outlook）和部分 WebView（尤其 Android 旧版）行为不可靠，且无法通过无障碍工具正确传达语义。 <p>常见错误现象：本地开发时看着居中，上线后突然左对齐；或加了 <code>!important 的 text-align: center 仍被忽略——大概率是 HTML 里残留了 align 属性，触发了某些渲染引擎的旧逻辑优先级。

• align 和 valign 在 <table>、<code><tr>、<code><td>、<code><th> 上全部废弃，无例外 <li>浏览器兼容性 ≠ 标准合规性。它们能“工作”，不代表该用</li> <li>若项目需支持 IE8 或老旧邮件模板，应单独处理，而非当作通用方案</li> <h3> <code>text-align 控制水平对齐，但只对行内内容生效

  text-align 是唯一标准、可预测的水平对齐方式，但它作用对象是“块容器内的行内内容”，不是“让这个单元格自己居中”。写错位置，样式就完全不体现。

  • ✅ 正确：加在 <td> 或 <code><th> 上 —— <code><td style="text-align: right;">金额</td>
  • ❌ 无效：加在 <tr> 上试图批量控制（除非配合后代选择器） <li>❌ 无效：加在 <code><table> 上期望继承到所有 <code>td —— text-align 不继承自 table 元素
  • ⚠️ 注意：如果 <td> 里放了 <code><div>（<code>display: block），text-align: center 只影响其内部文字，不居中这个 div 本身；需额外给 div 设 margin: 0 auto 或 display: inline-block

    vertical-align 控制垂直对齐，但作用域常被误解

    vertical-align 只对 display: table-cell（即默认的 td/th）和行内元素有效。它不是“把内容在单元格里上下居中”，而是“把内容的基线/顶部/底部对齐到当前行的对应位置”。父行高度未约束时，效果常与预期不符。

    

    html-ppt-to-pdf

    将使用 `

    ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

    下载
    • ✅ 稳定取值只有 top、middle、bottom；baseline 行为复杂，慎用
    • ⚠️ vertical-align: middle 生效前提是 <tr> 有足够高度 —— 若行高由内容撑开，且内容只有一行，可能看不出“居中”效果 <li>⚠️ 单元格含图片时，<code>vertical-align 作用于图片盒模型整体，不是图片内部像素；若图片设了 display: block，vertical-align 失效
    • ? 真正需要强控制垂直居中（比如多行文本+图标混合），建议用 display: flex 替代：<td style="display: flex; align-items: center;">...，但注意这会破坏表格语义，仅限局部优化 <h3>全局设置单元格对齐，用 CSS 类比内联样式更可靠</h3> <p>想统一整张表或某几列的对齐方式，硬编码每个 <code>td 的 style 属性既冗余又难维护。CSS 类 + 合理选择器才是工程化做法。
      • 整表统一：table.data td, table.data th { text-align: left; vertical-align: top; }
      • 指定列：<col class="numeric"> + col.numeric { text-align: right; }（注意：col 只支持 text-align，不支持 vertical-align）
      • 响应式场景：用媒体查询覆盖对齐，例如小屏时 td.name { text-align: center; }，大屏恢复左对齐
      • 避免滥用 !important —— 它掩盖的是选择器权重问题，比如父级 <div class="report"> 设了 <code>text-align: left，而你忘了加更具体的选择器去覆盖

        真正麻烦的从来不是“怎么写对齐”，而是“为什么写了没反应”——多数时候卡在 text-align 的作用对象理解偏差、vertical-align 的行高依赖，或 HTML 里残留的废弃 align 属性干扰了 CSS 层叠顺序。