头像与文字不对齐的根源是vertical-align: baseline默认行为，解决方法是给img设vertical-align: middle并确保文字容器为inline或inline-block；水平居中用text-align: center作用于td；头像尺寸不一致时用object-fit: cover配合固定容器；响应式场景建议改用display: table模拟表格或直接采用flex/grid布局。
表格里头像和文字总不对齐，先检查 vertical-align
表格单元格默认用 vertical-align: baseline，图片会贴着文字基线对齐，看起来就像“浮在上面”。文字多行时尤其明显——头像偏高，整行视觉重心失衡。
解决方法很简单：给 <img> 加 vertical-align: middle，同时确保文字容器（比如 <div> 或 <code><p></p>）是 inline 或 inline-block 级别。如果文字用了 <div> 且没设 <code>display: inline-block，vertical-align 就无效。
<td> <img src="avatar.jpg" style="max-width:90%"><span>张三</span> </td>- 避免在
<td> 上直接写 <code>vertical-align: middle——它控制的是整个单元格内容的对齐基准线，不是图片自身 - 若文字用
<p></p>，需额外加display: inline-block; vertical-align: middle;，否则vertical-align不起作用 -
<td style="text-align: center;"> <img src="a.jpg"><br><span>李四</span> </td>—— 图片和文字都居中 - 不要混用
align="center"和style="text-align: center"，后者优先级更高，前者可能被忽略或触发兼容模式 - 如果想让头像左对齐、文字右对齐，就别全用
text-align: center，改用display: flex+justify-content: space-between更可控 - 别用
background-image替代<img>——语义丢失，alt文本无法读取，无障碍支持差 -
object-fit: contain会保留完整图像但留白，cover更适合头像场景 - IE 不支持
object-fit，如需兼容 IE11，得用 JS fallback 或 polyfill，但 2026 年绝大多数内部系统已可放弃 IE - 桌面端：
.employee-row { display: table-row; }，.avatar-cell { display: table-cell; vertical-align: middle; } - 移动端：
@media (max-width: 768px) { .employee-row { display: flex; flex-direction: column; } .avatar-cell { display: block; text-align: center; } } - 别在真实
<table> 里套 flex——浏览器解析行为不稳定，某些安卓 WebView 会忽略 <code>display: flex表格本身不是问题，问题出在把表格当万能布局工具用。头像+文字这种强语义组合，更适合用语义化标签（
<figure></figure>+<figcaption></figcaption>）或现代布局（Grid/Flex）驱动，表格只该用于真正二维数据关系——比如部门、职级、入职日期这些可排序、可筛选的字段。
用 text-align 控制水平居中，但别滥用 align 属性
老式 HTML 的 align="center" 已被废弃，现代写法统一用 CSS：text-align: center 作用于 <td> 或 <code><th> 即可让里面所有行内内容（包括图片、文字、<code><span></span>）水平居中。
注意：这个属性只影响行内级内容；如果里面塞了个 <div> 且没设宽度或 <code>margin: 0 auto，它不会自动居中。
头像尺寸不一致？用 object-fit: cover 统一裁切
员工头像来源杂乱（手机拍、证件照、社交平台抓取），宽高比五花八门。直接设固定宽高会导致拉伸或留白，破坏卡片整齐感。
标准解法：把头像包进一个固定尺寸的容器（比如 width: 60px; height: 60px;），<img> 自身设 width: 100%; height: 100%; object-fit: cover;。这样不管原图比例如何，都会等比缩放并居中裁切。
响应式表格里头像文字错位？换掉 table 改用 display: table
真表格（<table>）在小屏上很难做响应式折叠——列一多就横向滚动，头像和文字被迫挤成一列，样式全乱。这时候硬调 CSS 很难救。
<p>更务实的做法：保留语义结构，但用 CSS 把 <code><div class="employee-row"> 模拟表格行为：<code>display: table-row，子元素用 display: table-cell。这样既能继承表格的对齐逻辑，又方便媒体查询下切换为 flex 布局。
