图片“浮”在文字上方的根本原因是默认为行内元素且按baseline对齐，预留下降空间导致视觉悬空；解决需在上设vertical-align:middle或用flex布局。

为什么图片在里总“浮”在文字上方

根本原因是 <img> 默认是行内元素，按 baseline 对齐——浏览器会为字母 “g”“y” 预留下降空间，导致图片底部和文字基线对齐，视觉上就“悬空”了。这不是 margin 或 padding 的问题，调它们只是碰运气。

解决它最直接的方式是给 <img> 加 vertical-align: middle，但注意：这个属性必须作用在 <img> 标签本身（或其 CSS 类），而不是父 <td> 上。 <ul> <li> <code>vertical-align: middle 对多数场景够用；若和表单控件（如 <input>）混排，vertical-align: top 更稳

不要写 <td style="vertical-align: middle"><img></td> —— 这个 vertical-align 是控制单元格内容在整行中的垂直位置，不是让图片在单元格里上下居中

如果图片旁还有文字，且希望两者严格等高对齐，建议统一设 line-height 和 font-size，否则 middle 会因字体差异偏移

如何让图片在单元格里真正水平+垂直居中

水平居中靠 text-align: center，但必须写在 <td> 上；垂直居中靠 <code>vertical-align + 单元格有明确高度（否则没参照系）。二者不能混用、也不能只写一个。

• 水平居中：<td style="text-align: center"><img src="x.jpg"></td> —— text-align 只对块级父容器生效，<td> 天然是 <code>display: table-cell，所以有效
• 垂直居中：需同时满足两个条件——<td> 设固定 <code>height（比如 height: 80px），且 <img> 设 vertical-align: middle
• 如果单元格里还有其他行内内容（比如文字+图片），vertical-align: middle 是对整行内容生效，不是单个图片；此时更稳妥的是用 display: flex; align-items: center; justify-content: center 包一层 <div> <h3>图片和文字紧挨着却有缝隙？删空格还不够</h3> <p>HTML 源码里的换行符、缩进空格，在渲染时会被合并成一个空白字符，刚好卡在 <code><img> 和旁边文字之间，形成约 4px 宽的间隙。仅删 HTML 空格不够，因为浏览器默认 font-size 不为 0。
  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 最轻量解法：<td style="font-size: 0"> <img><span style="max-width:90%">文字</span> </td> —— 父容器字号归零，子元素再设回正常字号
  • 更现代通用的做法：把 <img> 和文字都包进 <div style="max-width:90%">，彻底绕过行内布局陷阱 <li>避免用 <code>float：虽然能实现环绕，但后续清除浮动麻烦，且在表格单元格里容易破坏 table-cell 的渲染逻辑

  表格里图片尺寸失控导致布局错位

  常见于 JavaScript 动态拼接 HTML 时硬编码 width="500"，结果小屏设备撑破单元格，甚至让整个表格溢出视口。这不是对齐问题，是尺寸管理失效。

  • 立刻移除所有内联 width / height 属性，改用 CSS 控制：img { max-width: 100%; height: auto; }
  • 若需强制等比缩放又不拉伸，加 object-fit: cover 或 contain，但注意旧版 Safari 不支持 object-fit 在 <img> 上
  • 表格本身别设固定宽，尤其当含图片时：用 table-layout: fixed + 显式 width 在 <col> 上，比靠内容撑开更可控

  真正难的不是写对某一行样式，而是理解 text-align 和 vertical-align 各自生效的上下文——前者管“左右”，后者管“上下”，但都不是直接作用于图片自身的位置，而是它所处的那个行盒（line box）里的相对关系。漏掉这个前提，所有调试都在猜。