用HTML代码轻松搞定网页图片旁边的文字排版

首选display: flex并设align-items: center，或给img加vertical-align: middle；因img默认inline且对齐baseline，下方预留g/y下伸空间导致错位，HTML换行符也被当字符渲染。

图片和文字怎么不换行还对齐？

直接用 <img> 和文字写在一起，默认会基线对齐，文字看起来像“吊”在图片下半截，尤其加了边框或设置了 vertical-align 之后更明显。这不是 bug，是浏览器默认把图片当内联元素、按字母基线（baseline）对齐导致的。

实操建议：

1. 给 <img> 加 vertical-align: middle 或 vertical-align: top，立刻解决错位
2. 避免用 vertical-align: baseline（这是默认值，反而容易出问题）
3. 如果文字有多行，图片又想靠上对齐，vertical-align: top 更稳妥

文字紧贴图片右侧但不重叠？用 float 还是 flex？

float 能快速实现图文并排，但脱离文档流，后面元素容易塌陷；display: flex 更现代、可控性强，推荐新项目优先用。

实操建议：

1. 用包裹容器 + display: flex：父级设 display: flex; align-items: flex-start，图片和文字放同级子元素里
2. 若必须兼容 IE10 及以下，用 float: left + 清除浮动（如父级加 overflow: hidden）
3. 别单独给文字设 float——容易和图片“打架”，优先控制容器布局

响应式下图片变小，文字却撑开容器？

常见于没限制图片宽度时，<img> 在窄屏下溢出，或文字因容器变窄强行换行，破坏并排结构。

实操建议：

1. 图片必须加 max-width: 100%; height: auto，否则 flex 或 float 下可能溢出
2. 文字侧用 flex-shrink: 1（flex 布局下默认就有），防止它硬撑宽度
3. 关键：给文字容器加 min-width: 0，否则 flex 里文字长单词（如 URL）会强制撑宽

Chrome 看着好好的，Safari 文字偏高？

Safari 对 vertical-align 的解析更严格，尤其遇到字体未加载完成、或用了系统字体栈时，基线计算可能不同步。

实操建议：

1. 统一用 vertical-align: top 替代 middle，兼容性更好
2. 避免依赖字体度量值对齐——比如不用 line-height 配合 vertical-align 微调
3. 真要像素级对齐，改用 flex + align-items: center，比内联对齐更可靠

最麻烦的不是写法，而是忘记图片没设 max-width 或文字容器缺 min-width: 0——这两点一漏，响应式就崩。