图片“浮”在文字上方的根本原因是<img>默认为行内元素且按baseline对齐，预留下降空间导致视觉悬空；解决需在<img>上设vertical-align:middle或用flex布局。
为什么图片在里总“浮”在文字上方
根本原因是 <img> 默认是行内元素，按 baseline 对齐——浏览器会为字母 “g”“y” 预留下降空间，导致图片底部和文字基线对齐，视觉上就“悬空”了。这不是 margin 或 padding 的问题，调它们只是碰运气。
解决它最直接的方式是给 <img> 加 vertical-align: middle，但注意：这个属性必须作用在 <img> 标签本身（或其 CSS 类），而不是父 <td> 上。
-
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> 上；垂直居中靠 vertical-align + 单元格有明确高度（否则没参照系）。二者不能混用、也不能只写一个。
- 水平居中：
<td style="text-align: center"><img src="x.jpg"></td> —— text-align 只对块级父容器生效，<td> 天然是 display: table-cell，所以有效
- 垂直居中：需同时满足两个条件——
<td> 设固定 height（比如 height: 80px），且 <img> 设 vertical-align: middle
- 如果单元格里还有其他行内内容（比如文字+图片），
vertical-align: middle 是对整行内容生效，不是单个图片；此时更稳妥的是用 display: flex; align-items: center; justify-content: center 包一层 <div>
图片和文字紧挨着却有缝隙？删空格还不够
HTML 源码里的换行符、缩进空格，在渲染时会被合并成一个空白字符，刚好卡在 <img> 和旁边文字之间，形成约 4px 宽的间隙。仅删 HTML 空格不够，因为浏览器默认 font-size 不为 0。
立即学习“前端免费学习笔记（深入）”；
- 最轻量解法：
<td style="font-size: 0"><img><span style="font-size: 14px">文字</span></td> —— 父容器字号归零，子元素再设回正常字号
- 更现代通用的做法：把
<img> 和文字都包进 <div style="display: flex; align-items: center">，彻底绕过行内布局陷阱
- 避免用
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）里的相对关系。漏掉这个前提，所有调试都在猜。
根本原因是 <img> 默认是行内元素，按 baseline 对齐——浏览器会为字母 “g”“y” 预留下降空间，导致图片底部和文字基线对齐，视觉上就“悬空”了。这不是 margin 或 padding 的问题，调它们只是碰运气。
解决它最直接的方式是给 <img> 加 vertical-align: middle，但注意：这个属性必须作用在 <img> 标签本身（或其 CSS 类），而不是父 <td> 上。
-
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> 上；垂直居中靠 vertical-align + 单元格有明确高度（否则没参照系）。二者不能混用、也不能只写一个。
- 水平居中：
<td style="text-align: center"><img src="x.jpg"></td>——text-align只对块级父容器生效，<td>天然是display: table-cell，所以有效 - 垂直居中：需同时满足两个条件——
<td>设固定height（比如height: 80px），且<img>设vertical-align: middle - 如果单元格里还有其他行内内容（比如文字+图片），
vertical-align: middle是对整行内容生效，不是单个图片；此时更稳妥的是用display: flex; align-items: center; justify-content: center包一层<div>
图片和文字紧挨着却有缝隙？删空格还不够
HTML 源码里的换行符、缩进空格，在渲染时会被合并成一个空白字符，刚好卡在 <img> 和旁边文字之间，形成约 4px 宽的间隙。仅删 HTML 空格不够，因为浏览器默认 font-size 不为 0。
立即学习“前端免费学习笔记（深入）”；
- 最轻量解法：
<td style="font-size: 0"><img><span style="font-size: 14px">文字</span></td>—— 父容器字号归零，子元素再设回正常字号 - 更现代通用的做法：把
<img>和文字都包进<div style="display: flex; align-items: center">，彻底绕过行内布局陷阱 - 避免用
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）里的相对关系。漏掉这个前提，所有调试都在猜。
