根本原因是img为行内元素，默认基线对齐；text-align需作用于td父容器控制水平居中，vertical-align需设在td上配合height实现垂直居中，且须移除img的width属性防撑破单元格。
图片在表格单元格里不居中，根本原因不是“没写对齐代码”，而是默认行为被误判了：<img> 是行内元素，默认按基线（baseline）对齐，视觉上总像“浮在文字上方”，且 text-align 和 vertical-align 作用对象不同，混用就失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
为什么 text-align: center 写在 <td> 上才有效
<p>因为 <code>text-align 控制的是**行内内容在块级容器内的水平位置**，它必须作用于父容器（如 <td> 或 <code><th>），而不是图片本身。
<ul>
<li>常见错误现象：<code><td><img style="max-width:90%" src="x.jpg"></td> —— 完全无效，text-align 对 <img> 自身无意义
<td style="text-align: center"><img src="x.jpg"></td>
<div> 并设 <code>text-align: center
<td> 默认是 <code>display: table-cell，天然支持 text-align，不用额外改 display
vertical-align 控制垂直对齐，但只对行内/表格单元格生效
vertical-align 不是“让元素在单元格里上下居中”，而是调整它相对于**当前行内盒（line box）的对齐基准线**。在 <td> 中，它的作用对象是该单元格内所有行内内容组成的整行。
<ul>
<li>常用值：<code>middle（对齐行高中点）、top（顶部贴单元格顶）、bottom（底部贴单元格底）、baseline（默认，文字基线对齐）
vertical-align: middle 有时不够稳——尤其当单元格高度由内容撑开时；更可靠的是给 <td> 加 <code>height 和 vertical-align: middle
<img style="max-width:90%"> 单独加在图片上，效果取决于周围有没有其他行内元素；不如统一设在 <td> 上
<li>示例：<code><td style="text-align: center; vertical-align: middle; height: 120px"><img src="logo.png"></td>
大图撑破单元格导致居中失效？先管住图片宽度
表格居中失败的常见幕后黑手，是单元格里塞了一张 width="500" 的硬编码图片——它强行拉宽单元格，使整个 <table> 实际宽度远超预期，<code>margin: auto 就算写了也计算不出正确留白。
- 移除 HTML 中的
width属性（如<img style="max-width:90%">），改用 CSS 控制尺寸 - 推荐写法：
<td style="text-align: center"><img src="x.jpg" style="max-width:90%"></td> - 如果单元格有固定宽度（比如
width: 200px），图片设width: 100%也能自适应，避免溢出 - 禁用
align属性：<img align="center">在 HTML5 中已废弃，现代浏览器不保证解析，一律删掉
复杂布局下，用 Flex 替代 <td> 内部对齐
<p>当单元格内容不止一张图、还混排文字或按钮，或者需要响应式缩放时，<code>text-align + vertical-align 组合容易失控。这时可以把 <td> 当成 Flex 容器用。
<ul><li>做法：给 <code><td> 加 <code>style="display: flex; justify-content: center; align-items: center;"
auto
vertical-align 和 text-align 在此环境下失效；如果单元格里还有多张图并排，它们会挤在一起，需加 gap 或外边距真正卡住人的往往不是“怎么写”，而是没意识到 <td> 的对齐行为分两层：水平靠 <code>text-align（父控子），垂直靠 vertical-align（行内盒对齐），而图片尺寸失控会直接破坏这两层的前提——所以调样式前，先看一眼源码里有没有裸写的 width="xxx"。
