用 display: flex + align-items: center 可可靠解决图文对齐，因 vertical-align 仅对 inline/inline-block/table-cell 元素生效；flex 要求图与文为同级子元素，图片设 max-width:100%、文字避免嵌套，间距用 gap，响应式需注意 flex-wrap、flex-shrink 和高度来源。
直接用 display: flex + align-items: center 就能解决绝大多数图文对齐问题，不用折腾 vertical-align、line-height 或浮动。
为什么 vertical-align: middle 经常失效
它只对 display 为 inline、inline-block 或 table-cell 的元素生效；<p></p>、<div> 默认是 block，写了也白写。常见错误包括：
<ul>
<li>把 <code><img alt="HTML元素对齐演示的图文教程" > 和 <p></p> 写在同一行却没给 p 加 display: inline-block
line-height，干扰基线计算<i></i> 包字体图标，但又手动设了 display: block，直接废掉 vertical-align
display: flex 布局怎么写才不翻车
关键不是“让图和文对齐”，而是让它们成为同一个 flex 容器的直系子元素。实操要点：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器必须设
display: flex和align-items: center（垂直居中） - 图片加
max-width: 100%和height: auto，防拉伸 - 文字用
<span></span>或<p></p>都可以，但别嵌套多余标签——align-items只作用于直接子元素 - 需要间距时优先用
gap，别靠margin-right，否则在 flex wrap 场景下易错位
响应式下图文并排突然错位怎么办
不是对齐逻辑坏了，而是容器宽度不够导致换行或挤压。排查点：
立即学习“前端免费学习笔记（深入）”；
- 检查是否漏了
flex-wrap: wrap—— 如果想强制单行，得配合min-width或媒体查询限制最小尺寸 - 图片没设
flex-shrink: 0，小屏下被压缩变形，视觉上像“下沉” - 文字用了固定
font-size但没配em或rem，缩放后和图片比例失衡 - 某些 iOS Safari 对
img的vertical-align渲染异常，flex 是唯一稳解
最常被忽略的是：flex 容器本身的高度来源。如果父级高度由内容撑开，而图片又没设明确高度，align-items: center 就会“找不到中心”——建议显式设 min-height 或用 place-content: center 替代。
