最快见效的方法是用包裹图片并设text-align: center，前提是图片保持行内元素且未被设为display: block等破坏行内流的样式，同时父容器不设宽度限制或设为100%。

用 <div> 包裹图片并设 <code>text-align: center 最快见效

多数人想快速让多张图片水平居中排成一行，直接给父容器加 text-align: center 就行。前提是图片是行内元素（<img> 默认就是），且没被设成 display: block 或其他破坏行内流的样式。

常见错误是把 <img> 单独设成 display: block 后还指望 text-align 生效——它只对行内内容起作用。

• 确保所有 <img> 在同一个 <div> 里，且该 <code><div> 没设 <code>width 限制（或设为 100%）
• 避免在 <img> 上写 float、position: absolute 或 display: block（除非你明确需要脱离文本流）
• 若图片太多换行，这是正常行为；如需强制单行，得加 white-space: nowrap 到父 <div> <h3>用 <code>display: flex 控制间距和对齐更可控

当需要等距分布、垂直居中、响应式缩放时，flex 是更稳妥的选择。它不依赖文本流，也不受 float 或 inline 行为干扰。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

典型写法：<div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;">...</div>。其中 gap 控制图间距，flex-wrap: wrap 允许折行，justify-content: center 让整行居中而非每张图单独居中。

• justify-content: center 居中的是“整行内容”，不是每张图；如果只有一张图，效果和 text-align 类似
• 若图片高度不一致，加 align-items: center 可垂直对齐基线（默认是 baseline，容易看起来错位）
• 移动端小屏下，gap 值过大会导致单行容不下两张图，建议用 rem 或 % 替代固定 px

避免用 <table> 或 <code>float 做多图布局

老教程里常见用 <table> 表格或 <code>float: left 排图，现在完全没必要。前者语义错误、维护成本高；后者必须清浮动，且 float 元素会脱离文档流，容易引发父容器高度塌陷。

典型症状：图片显示了，但下方内容紧贴着顶部，或者整个图区块在页面上“消失”——大概率是 float 没清除，或 <table> 的 <code>border-collapse、cellpadding 混乱导致尺寸失控。

• 别为了“兼容 IE8”硬上 float；现代项目基本不需要支持这么老的浏览器
• <table> 只应在展示真正表格数据时使用，图片排版不属于该语义 <li>如果必须兼容旧环境，用 <code>inline-block + text-align 组合比 float 更干净

响应式图片宽度要靠 max-width 和 height: auto

多图排版在手机上挤成窄条或溢出屏幕，往往是因为没控制图片宽度。单纯设 width: 100% 会让图片撑满父容器，但若父容器是 flex 且未设宽，可能失效；更可靠的是用 max-width。

推荐写法：<img src="..." style="max-width:90%">。这样图片在窄屏下自动缩放，又不会失真拉伸。

• 别只设 width: 100% 而忽略 height: auto，否则图片会被压扁
• 若用 flex 布局，可在父容器加 flex-shrink: 0 防止图片被压缩过度（但慎用，可能破坏响应式）
• 加载大图时空白区域明显，可提前在 <img> 上写 width 和 height 属性（HTML 属性，非 CSS），帮助浏览器预留空间
实际排版效果取决于容器宽度、图片原始尺寸、设备像素比和 CSS 层叠顺序。最常被忽略的是图片自身的 vertical-align 默认值（baseline），它会让底部留白，看着像没居中——这时候加一句 vertical-align: middle 就能解决。