display: flex是图文混排首选方案，vertical-align: middle仅适用于小图标等轻量场景；因img默认inline且对齐baseline，下方预留下伸空间导致错位，html换行符也被当字符渲染。
图文混排不是“让图片和文字挨在一起”就完事，而是要解决视觉错位、换行干扰、响应式压缩这三类实际问题。现代项目里，display: flex 是首选方案，vertical-align: middle 仅适用于小图标或按钮内嵌图这类轻量场景。
为什么 img 和文字总像“吊着”或“错位”
这不是代码写错了，是浏览器默认行为：img 是行内替换元素，默认对齐基线（baseline），而基线下方预留了字母 g、y 的下伸空间——所以图片底下总多出几像素空白；同时 HTML 源码里的换行符和空格也被当成真实字符参与布局。
-
vertical-align: baseline是默认值，不是“没设置”，它真正在起作用 - 只给
img加vertical-align: middle就能快速消除空白，但前提是父容器没用 block 布局强行撑开行高 - 如果文字用了
line-height，且值大于图片高度，vertical-align: middle会以整行高度为参考线，可能反而偏上
display: flex 实现左右图文并列的实操要点
这是卡片、产品介绍、侧边栏简介等场景最稳定可控的方式。关键不在子元素怎么写，而在父容器怎么设。
-
display: flex必须加在包裹img和文字的直接父容器上，不是加在img或p上 -
align-items: center才能真正垂直居中；只靠vertical-align在 flex 容器里无效 -
gap: 16px比分别写margin-right更可靠，避免 margin 折叠或方向冲突 -
img要加flex-shrink: 0，否则小屏时会被压缩变形；文字部分用flex-grow: 1占满剩余宽度
inline-block 用于多图网格+图说的注意事项
当需要多张图横向排列、每张图带标题（比如画廊、产品列表），display: inline-block 比 float 更干净，也比 grid 更轻量兼容旧环境。
-
figcaption默认是块级元素，直接跟img并列会强制换行，必须用figure或div包一层再设display: inline-block - 每个图+标题单元要统一宽度（如
width: 200px），否则小屏换行位置不可控 - 用
text-align: center控制图说文字居中，别依赖figcaption自身的 display 行为 - 注意
inline-block元素间的空格会渲染成 4px 左右间隙，可用注释或font-size: 0消除
真正容易被忽略的是：图文混排从来不是单一 CSS 属性能搞定的事。你得先判断场景——是单图配说明？多图网格？还是图标+文字按钮？选错方案，后面调 margin 或 line-height 都是白费力气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
