img在表格单元格中偏上或居左是因行内元素默认基线对齐；应设td的vertical-align: middle，配合width/height+object-fit: cover统一尺寸，用event.stoppropagation()隔离头像点击事件，并在小屏改用flex响应式布局。
IMG标签在表格单元格里总是偏上或居左？
默认情况下，<img> 是行内元素，会和文字基线对齐，导致在 <td> 里看起来“悬空”或贴左。这不是 bug，是 CSS 默认行为。<p>解决方法很简单：给 <code><img> 加 vertical-align: middle，或者把单元格设为 vertical-align: middle —— 后者更稳妥，因为会影响整个单元格内容（比如头像旁还有姓名文本）。
<td style="vertical-align: middle;"><img src="avatar.jpg" style="max-width:90%"></td>- 避免只给
<img>加display: block，否则它会独占一行，失去与旁边文字的对齐能力 - 如果用了
flex布局（比如td { display: flex; align-items: center; }），记得设justify-content控制水平位置，否则头像仍可能靠左
头像尺寸不一致导致表格行高参差不齐？
不同尺寸的 <img> 会让 <tr> 高度自动撑开，尤其当某行头像没裁剪、宽高比差异大时。<p>强制统一显示尺寸最可靠：用 <code>width + height + object-fit: cover，并确保父容器（<td>）有明确高度或最小高度。<ul>
<li><code><img src="a.jpg" style="max-width:90%" style="max-width:90%" style="object-fit: cover; border-radius: 50%;">
width 不设 height，否则缩放后比例失真，且无法约束行高object-fit: cover 裁剪居中，contain 会留白；若后端返回的是圆角 PNG，border-radius 可以直接生效表格里头像点击跳转却触发了整行响应？
常见于给 <tr> 绑了 click 事件，但用户只想点头像进详情页 —— 结果点哪都跳，还干扰头像本身的 <code>onclick。
关键在事件捕获阶段拦截：给 <img> 的事件加 event.stopPropagation()，同时确保 <tr> 的监听器别用 <code>onclick 写在 HTML 里（不易维护）。
-
<img src="x.jpg" onclick="viewProfile(event);">→function viewProfile(e) { e.stopPropagation(); /* ... */ } - 如果用现代写法，推荐
tr.addEventListener('click', handleRowClick)+img.addEventListener('click', handleAvatarClick)，天然隔离 - 注意移动端点击区域太小：给
<td> 加 <code>padding或用伪元素扩大点击热区，别只依赖图片本身响应式表格里头像被压缩变形或换行错位？
小屏下
<table> 宽度超限，浏览器会缩小整个表格，导致头像模糊、文字挤成一团，甚至 <code><td> 换行把头像和名字拆开。<p>与其强行适配，不如在窄屏改用块状布局：用 <code>@media把<table> 切换为 <code>display: block，每个<tr> 改成 <code>display: flex或堆叠排列。@media (max-width: 768px) { table { display: block; } tr { display: flex; flex-direction: column; } }- 别依赖
table-layout: fixed强控列宽，它在小屏下反而加剧溢出 - 真正要保留表格语义（如屏幕阅读器）时，优先用
aria-label补充头像含义，而不是塞冗余文字
头像对齐看着简单，实际牵扯到行内布局、尺寸控制、事件流和响应式断点四个层面。最容易被忽略的是：没设
vertical-align就直接调object-fit，结果头像居中了，文字却吊在半空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
