最稳妥方案是用 display: flex；若必须用 inline-block，则需显式设 vertical-align: middle，并避免 white-space: pre、float 等干扰样式，同时为图片设宽高防加载失败跳动。
用 display: inline-block 让文字和图片同行显示
默认情况下，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 是目前最健壮的方式，尤其适合需要居中、等高、响应式调整的场景。
html5全屏可拖拽的横向图片布局
下载
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片的标号数字时，隐藏所有的缩略图，在屏幕上显示当前被点击的图片放大，文本内容展示效果。
- 父容器设
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; }
图片加载失败时文字位置突然偏移怎么办
当
立即学习“前端免费学习笔记（深入）”；
- 始终为
width和height，哪怕只是占位值，防止重排 - 用
onerror内联处理或 CSS::after伪元素 fallback，但注意伪元素不适用于替换元素 - 更可靠的做法：用背景图替代
background-size和background-position控制，失败时不影响文档流
flex 方案最省心，但得留意低版本 Android WebView 对 align-items 的解析偏差；如果只兼容现代浏览器，别犹豫，直接上 display: flex。 
