图片在表格中不居中，90%是因未正确设置td的text-align:center（控制水平居中）和img的vertical-align:middle（控制垂直居中），且大图硬编码width会撑破表格破坏居中。

图片在表格里不居中，90% 是因为没管好 vertical-align 和父容器的 text-align，而不是表格本身的问题。

为什么 text-align: center 加在 <td> 上才有效 <p>表格单元格（<code><td> 或 <code><th>）默认是块级容器，但它的内容（比如 <code><img>）是行内元素。所以对齐必须作用于容器，而非图片自身。

• 写在 <img> 上的 text-align: center 完全无效 —— 它不是文本容器，不响应这个属性
• 正确做法：给 <td> 加 <code>style="text-align: center;"，或用类统一控制
• 如果 <td> 里还混有文字，这个设置会让文字和图片一起水平居中 <li>注意：若 <code><td> 被设了 <code>display: flex 或 float，text-align 会失效

  vertical-align 控制图片上下位置，不是 align 属性

  HTML5 已废弃 align 和 valign 属性，硬写 <img align="middle"> 或 <td valign="middle"> 在现代浏览器里大概率被忽略，甚至触发校验警告。 <ul> <li>真正起效的是 CSS 的 <code>vertical-align，它只对行内元素和表格单元格生效

• 常用值：middle（与文本中线对齐）、top、bottom、baseline（默认）
• 要让图片在单元格中垂直居中，优先给 <img> 设 vertical-align: middle;
• 如果图片旁有文字，vertical-align: middle 是最稳的选择；纯图单元格也可给 <td> 加 <code>vertical-align: middle;

  大图撑破表格？先砍掉硬编码的 width="500px"

  表格居中失败、错位、横向滚动，往往不是 CSS 写错了，而是单元格里塞了一张 500px 宽的图，而父容器只有 300px 宽 —— 表格被迫“撑开”，margin: auto 就算写了也无处可居中。

  

  html-deploy

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

  下载
  • JavaScript 动态拼接 HTML 时，别在字符串里写 width="500px" 这种固定值
  • 改用 CSS 控制尺寸：img { max-width: 100%; height: auto; }，让图随单元格缩放
  • 如果表格本身需要居中，确保 <table> 有明确宽度（如 <code>width: 80%），再配 margin: 0 auto;
  • 避免同时给 <img> 设 width 和 max-width，后者可能被前者覆盖

  表格里图片居中真正的难点不在“怎么写”，而在“谁该负责对齐”：水平看 <td> 的 <code>text-align，垂直看 <img> 的 vertical-align，而尺寸失控才是破坏布局的隐形推手 —— 别等居中失败了才回头查图片 width 属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！