首选display: flex并设align-items: center，或给img加vertical-align: middle；因img默认inline且对齐baseline，下方预留g/y下伸空间导致错位，html换行符也被当字符渲染。
图片和文字怎么不换行还对齐？
直接用 <img> 和文字写在一起，默认会基线对齐，文字看起来像“吊”在图片下半截，尤其加了边框或设置了 vertical-align 之后更明显。这不是 bug，是浏览器默认把图片当内联元素、按字母基线（baseline）对齐导致的。
实操建议：
- 给
<img>加vertical-align: middle或vertical-align: top，立刻解决错位 - 避免用
vertical-align: baseline（这是默认值，反而容易出问题） - 如果文字有多行，图片又想靠上对齐，
vertical-align: top更稳妥
文字紧贴图片右侧但不重叠？用 float 还是 flex？
float 能快速实现图文并排，但脱离文档流，后面元素容易塌陷；display: flex 更现代、可控性强，推荐新项目优先用。
实操建议：
- 用包裹容器 +
display: flex：父级设display: flex; align-items: flex-start，图片和文字放同级子元素里 - 若必须兼容 IE10 及以下，用
float: left+ 清除浮动（如父级加overflow: hidden） - 别单独给文字设
float——容易和图片“打架”，优先控制容器布局
响应式下图片变小，文字却撑开容器？
常见于没限制图片宽度时，<img> 在窄屏下溢出，或文字因容器变窄强行换行，破坏并排结构。
实操建议：
- 图片必须加
max-width: 100%; height: auto，否则 flex 或 float 下可能溢出 - 文字侧用
flex-shrink: 1（flex 布局下默认就有），防止它硬撑宽度 - 关键：给文字容器加
min-width: 0，否则 flex 里文字长单词（如 URL）会强制撑宽
Chrome 看着好好的，Safari 文字偏高？
Safari 对 vertical-align 的解析更严格，尤其遇到字体未加载完成、或用了系统字体栈时，基线计算可能不同步。
实操建议：
- 统一用
vertical-align: top替代middle，兼容性更好 - 避免依赖字体度量值对齐——比如不用
line-height配合vertical-align微调 - 真要像素级对齐，改用 flex +
align-items: center，比内联对齐更可靠
最麻烦的不是写法，而是忘记图片没设 max-width 或文字容器缺 min-width: 0——这两点一漏，响应式就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
