图片在表格单元格中默认基线对齐，需设td的text-align:center和vertical-align:middle实现居中；响应式应使用max-width:100%、table-layout:fixed；兼容IE可设td高度或用inline-block模拟；带边框阴影时需box-sizing:border-box。
表格单元格里图片上下左右居中对齐
默认情况下，<img> 在 <td> 里会和文字基线（baseline）对齐，底部留白，看起来像“悬在空中”。这不是 bug，是 CSS 默认的 vertical-align: baseline 行为。
要真正居中，得同时处理水平和垂直两个方向：
- 水平居中：给
<td>加text-align: center（注意不是给<img>加margin: 0 auto，那在 table 单元格里无效） - 垂直居中：给
<img>加vertical-align: middle，或者更稳妥地——给<td>加vertical-align: middle - 如果图片高度超出单元格，还需配合
height和overflow控制，否则可能撑开行高
响应式图片嵌入表格时宽高失控怎么办
直接写 <img src="x.jpg" width="100"> 在现代布局里极不推荐：硬编码宽高会破坏响应式，且在高 DPI 屏幕上模糊。更糟的是，在 table 中设 width 属性可能被 table 自动重算覆盖。
正确做法是用 CSS 控制尺寸，并确保表格不强制压缩：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>设max-width: 100%; height: auto;，保证等比缩放 - 给
<td>设width或min-width（如min-width: 80px），防止小图被压扁 - 禁用 table 的自动宽度计算：给
<table>加table-layout: fixed，再配合width值，才能让列宽稳定
IE8–11 下 vertical-align: middle 失效的兼容写法
老 IE 对 vertical-align 支持不一致，尤其当 <td> 没设明确高度时，middle 可能退化成 baseline。这不是 bug，是盒模型解析差异。
兼容方案不是加 hack，而是换思路：
- 给
<td>显式设height（哪怕只是height: 40px） - 改用
display: flex; align-items: center; justify-content: center—— 但注意：IE10+ 才支持 flex 布局，IE9 及以下必须回退 - 最稳的降级：用
<div style="display: inline-block; vertical-align: middle; height: 100%; width: 0;">配合<img>同级并排（模拟 line-height 居中）
带边框/阴影的图片在表格里边缘溢出
box-shadow 和 border 默认不参与盒模型尺寸计算，所以即使 <img> 宽度设为 100%，加上 2px 边框后也会溢出 <td>，导致横向滚动或错位。
解决只需一行 CSS：
- 给
<img>加box-sizing: border-box（注意：该属性对<img>本身有效，但需配合width: 100%或max-width: 100%） - 若用
padding做内边距，同样要加box-sizing: border-box - 阴影建议用父容器（
<td>或包裹<div>）承载，避免影响图片自身尺寸逻辑
表格里嵌图看着简单，实际卡点全在盒模型细节和浏览器默认行为上。最容易被忽略的是：不设 table-layout 就调 width，不设 height 就信 vertical-align，还有把 box-sizing 当成 div 专属属性——这些都会让排版在不同环境里反复漂移。
