图片在表格单元格中不居中，需在<td>上设置text-align: center和vertical-align: middle；margin: 0 auto无效，因table-cell布局限制；固定高度下必须明确<td>高度且vertical-align直接作用于该<td>。

表格单元格里图片不居中？先看默认行为

图片在 <td> 里不居中，不是代码漏写了，而是误用了对齐逻辑。<img> 默认是 inline 元素，在 <td>（display: table-cell）里，text-align 和 vertical-align 的作用对象和生效条件跟普通块容器完全不同。

常见错误现象：

• 给 <img> 加 style="margin: 0 auto" → 完全无效
• 给 <img> 加 style="text-align: center" → 属性对自身无意义
• 只设 <tr> 的 valign="middle" → valign 对 <tr> 无效，只对 <td> 和 <th> 生效

正确做法是把对齐控制放在 <td> 上：

• text-align: center 控制水平居中（把图片当文字排版）
• vertical-align: middle 控制垂直对齐基准线（<td> 默认就是这个值，一般不用重复写）
• 若单元格高度由内容撑开，vertical-align: middle 可能视觉偏移；加 height 或 min-height 才能稳定居中

用 CSS 还是 HTML 属性？兼容性怎么选

两种写法都有效，但适用场景不同：

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

• CSS 写法：<td style="text-align: center; vertical-align: middle;"><img src="x.jpg"></td> —— 现代项目首选，语义清晰，可复用，支持响应式
• HTML 属性写法：<td align="center" valign="middle"><img src="x.jpg"></td> —— 主要用于 HTML 邮件或老系统（如 IE8+），align 和 valign 在表格布局中仍被广泛支持

注意：不要混用。比如同时写 align="center" 和 style="text-align: right"，后者会覆盖前者；CSS 优先级更高。

兼容性影响：

html-ppt-to-pdf

将使用 `

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

下载

• text-align + vertical-align 组合在 IE8+、Chrome、Firefox、Safari 全部支持
• valign 属性在 HTML5 中已废弃，但浏览器仍兼容；若项目需通过 W3C 验证，优先用 CSS
• 邮件客户端（如 Outlook）对 CSS 支持弱，反而更认 valign="middle" 和 align="center"

为什么给 img 加 display: block + margin: 0 auto 会失效

这不是 bug，是 table-cell 布局的固有限制：margin: auto 要求元素在常规流中、有明确宽度、且为块级元素——但 <td> 的宽度计算逻辑与普通块容器不同，子元素即使设了 display: block，其宽度仍受表格列宽约束，auto 无法反向推算可用空间。

典型翻车现场：

• <td><img src="x.jpg" style="display: block; margin: 0 auto;"></td> → 图片可能左对齐、拉宽、或换行错位
• <td><div style="text-align: center;"><img src="x.jpg"></div></td> → 多套一层没用，<div> 在 <td> 里仍是 inline-level，text-align 不继承

真正有效的微调方式：

• 需要右移 5px？用 margin-left: 5px，别依赖 auto
• 想让图片独占一行且居中？改用 <div style="text-align: center;"><img></div> 包在 <td> 里，但前提是 <td> 本身宽度明确
• 图片高度超出 <td> 行高？vertical-align: middle 仍生效，但视觉会被截断——检查 <td> 是否有 height 或 overflow 限制

固定高度表格中垂直居中必须满足的两个条件

想让图片在固定高度的表格里真正“上下居中”，光写 vertical-align: middle 不够，必须同时满足：

• <td> 必须有明确高度参照：比如 height: 120px、min-height: 120px，或父级 <table> 设了 height
• vertical-align: middle 必须直接写在**最内层包裹 <img> 的 <td> 上**，而不是外层 <tr> 或上层嵌套表的 <td>

示例（可靠写法）：

<table height="300">
  <tr>
    <td align="center" valign="middle">
      <table>
        <tr>
          <td align="center" valign="middle" height="120">
            <img src="logo.png" style="max-width: 100%; height: auto;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

容易被忽略的点：嵌套表格中，valign 必须层层下传；外层 <td> 设了 valign="middle"，但内层 <td> 没设，图片依然会贴顶。