vertical-align: middle 在滚动文字中失效，因其仅对 inline 或 table-cell 元素生效，且受行高、基线及图片加载状态影响；应改用 display: inline-flex + align-items: center 实现可靠垂直居中，并显式设置图片宽高、避免 marquee 标签。
vertical-align: middle 在滚动文字里为啥不起作用
因为 vertical-align 只对 行内元素（inline）或表格单元格（table-cell） 生效，而滚动容器（如 <marquee></marquee> 或用 animation 模拟的滚动）里的文字和图片默认是 inline，看似能对齐，但实际受行高、基线、图片加载时机影响极大——尤其当图片没设宽高或未加载完成时，vertical-align: middle 会“对齐到一个不存在的中间点”。
用 flex 布局替代 vertical-align 实现真居中
把滚动内容包裹进一个 display: flex 容器，用 align-items: center 控制垂直居中，比 vertical-align 更可靠、更可控：
<div class="scroll-container">
<div class="scroll-content">
<span>文字</span>
@@##@@
<span>更多文字</span>
</div>
</div>
CSS 关键部分：
.scroll-container {
overflow: hidden;
white-space: nowrap;
}
.scroll-content {
display: inline-flex;
align-items: center;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
- 必须给
<img src="icon.png" alt="icon" style="max-width:90%" style="max-width:90%">显式设置width和height，否则 flex 无法准确计算基线 - 避免用
<marquee></marquee>标签——它已废弃，且不支持 flex 子项行为 - 如果文字和图片高度差异大（比如 12px 字体配 48px 图标），可加
line-height: 1防止文字撑高容器
图片和文字高度不一致时的微调技巧
即使用了 flex，仍可能出现视觉上“偏高”或“偏低”，常见于字体渲染差异（如 macOS 的 subpixel 渲染）或图标本身带空白边：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
margin-top: -2px或transform: translateY(-1px)手动修正（小范围调整优先用transform，不触发重排） - 用
font-size: 0在父容器上消除 inline 元素间的空白间隙，再在子元素里恢复字体大小 - 检查图标是否是 SVG：SVG 默认
vertical-align: baseline，需显式设为vertical-align: middle或改用 flex
兼容性与性能注意点
滚动动画在低端设备或长列表中容易掉帧，特别是同时操作多个 transform：
- 确保只对
transform和opacity做动画，避免触发布局（layout）或绘制（paint） - 在 iOS Safari 上，
will-change: transform可提升动画流畅度，但别滥用——仅加在真正滚动的元素上 - 如果必须支持 IE，放弃 flex + animation 方案，改用
position: relative+left动画，并配合filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)强制硬件加速
真正难的不是让图片“看起来居中”，而是让不同字体、不同尺寸、不同来源的图片在各种设备上保持一致的视觉基线——这需要测试，而不是靠一次对齐属性解决。
