最稳妥方案是用 display: flex；若必须用 inline-block，则需显式设 vertical-align: middle，并避免 white-space: pre、float 等干扰样式，同时为图片设宽高防加载失败跳动。
用 display: inline-block 让文字和图片同行显示
默认情况下，<img> 是行内替换元素，理论上能和文字同行，但常因换行符、空格或默认垂直对齐方式错位。最稳妥的显式方案是统一设为 inline-block。
-
vertical-align必须显式设置（如vertical-align: middle），否则图片默认按基线对齐，文字下方会留出 descender 空隙 - 父容器不要有
white-space: pre或强制换行类样式，否则空格会被保留并撑开间距 - 图片若带
height但未设line-height，文字行高可能被拉高，建议文字容器单独控制line-height
避免 float 带来的布局塌陷问题
float: left 虽能让图文同行，但父元素高度会坍缩——这是老式写法最常踩的坑。
- 必须给父容器加
overflow: hidden或clearfix伪类才能撑开高度 -
float元素脱离文档流，后续兄弟块级元素会上移，容易引发意料外的覆盖或错位 - 现代项目中，
float已不推荐用于图文排列，仅在兼容 IE8 及更旧浏览器时才考虑
Flex 布局下图文同行更可控（推荐）
用 display: flex 是目前最健壮的方式，尤其适合需要居中、等高、响应式调整的场景。
住哪网酒店预订程序城市专用版
下载
住哪酒店分销联盟是住哪网提供的一个网络分销预订平台。加入该本台，您可以通过在您网站或博客上展示图片、文字链接或搜索框，只要通过您的展示预订并入住的订单，您将得到至少12元/间夜的佣金。 加入条件非常宽松，如您经营的是商业性质还是个人性质的网站，可以通过本站提供的API接口，建立一个频道，一方面丰富网站内容，另一方面增加网站收入；如果您在其它网站上有博客，可以通过文字和图片链接，只要通过您的链接预
- 父容器设
display: flex; align-items: center，文字和图片自动垂直居中，无需算vertical-align - 图片默认不换行，但若文字过长需折行，可给文字容器加
flex: 1; min-width: 0防止溢出 - 注意 Safari 旧版本对
flex的min-width处理异常，必要时加flex-shrink: 1 - 示例：
.container { display: flex; align-items: center; } .text { flex: 1; min-width: 0; } .img { width: 24px; height: 24px; }
图片加载失败时文字位置突然偏移怎么办
当 <img> 加载失败（如 404、跨域、路径错误），浏览器会回退到缺失图标占位框，尺寸和对齐行为可能突变，导致文字跳动。
立即学习“前端免费学习笔记（深入）”；
- 始终为
<img>显式设置width和height，哪怕只是占位值，防止重排 - 用
onerror内联处理或 CSS::after伪元素 fallback，但注意伪元素不适用于替换元素 - 更可靠的做法：用背景图替代
<img>标签，配合background-size和background-position控制，失败时不影响文档流
flex 方案最省心，但得留意低版本 Android WebView 对 align-items 的解析偏差；如果只兼容现代浏览器，别犹豫，直接上 display: flex。 
