结论：解决图文对齐需优先处理三问题——图片文字错位、换行混乱、小屏溢出；根本原因在于img默认vertical-align:baseline与文字基线不一致，修复方案为显式设置vertical-align或align-items，并约束宽高、避免nowrap、合理使用grid布局。

直接说结论：不用“精美”这个词去想，先解决三个具体问题——图片和文字对不齐、换行错乱、小屏撑破布局。搞定它们，效果自然就稳了。

为什么 img 总是比旁边文字高一截

这不是 bug，是 img 默认 vertical-align: baseline，而文字基线在字母底部，图片底边却对齐这个位置，导致看起来“悬空”。td 里更明显，因为单元格默认 vertical-align: middle，两者基准打架。

• 最简修复：给 img 加 vertical-align: middle 或 top，别依赖默认值
• Flex 容器里这个属性无效，得用 align-items: center 统一控制
• 表格中如果还错位，检查 td 里有没有隐藏空格或换行符——它们会撑高整行

display: flex 做左图右文时容易崩的点

结构看着简单，但漏掉一两个约束，缩放或加载瞬间就会跳动或溢出。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• img 必须设 width 和 height（或 aspect-ratio），否则加载前高度为 0，文字上蹿
• 文字容器要用 flex-grow: 1 占满剩余空间，别用 margin-left 推，后者在 zoom 或字体放大时立刻失效
• 禁用 white-space: nowrap——它会让长标题撑破卡片宽度，反而破坏图文比例

多图并排自动换行，为什么 figure + figcaption 会独占一行

因为 figure 和 figcaption 都是块级元素，默认各占一行。不是写法错，是没覆盖默认行为。

• 把每组 figure 包进一个 div，然后给这个 div 设 display: inline-block
• 父容器加 text-align: center 控制整体居中，而不是给每个 figcaption 单独设
• 响应式临界点容易卡在“最后一行只有一张图”，改用 display: grid 更稳，比如 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))

真正难的不是写出“看起来对”的代码，而是预判加载、缩放、字体变化、不同设备渲染差异带来的偏移。这些细节不写进 CSS，光靠结构撑不住。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！