最快见效的方法是用<div>包裹图片并设text-align: center，前提是图片保持行内元素且未被设为display: block等破坏行内流的样式，同时父容器不设宽度限制或设为100%。
用 <div> 包裹图片并设 text-align: center 最快见效
多数人想快速让多张图片水平居中排成一行，直接给父容器加 text-align: center 就行。前提是图片是行内元素（<img> 默认就是），且没被设成 display: block 或其他破坏行内流的样式。
常见错误是把 <img> 单独设成 display: block 后还指望 text-align 生效——它只对行内内容起作用。
- 确保所有
<img>在同一个<div>里，且该<div>没设width限制（或设为100%） - 避免在
<img>上写float、position: absolute或display: block（除非你明确需要脱离文本流） - 若图片太多换行，这是正常行为；如需强制单行，得加
white-space: nowrap到父<div>
用 display: flex 控制间距和对齐更可控
当需要等距分布、垂直居中、响应式缩放时，flex 是更稳妥的选择。它不依赖文本流，也不受 float 或 inline 行为干扰。
典型写法：<div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;">...</div>。其中 gap 控制图间距，flex-wrap: wrap 允许折行，justify-content: center 让整行居中而非每张图单独居中。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
justify-content: center居中的是“整行内容”，不是每张图；如果只有一张图，效果和text-align类似 - 若图片高度不一致，加
align-items: center可垂直对齐基线（默认是 baseline，容易看起来错位） - 移动端小屏下，
gap值过大会导致单行容不下两张图，建议用rem或%替代固定px
避免用 <table> 或 float 做多图布局
老教程里常见用 <table> 表格或 float: left 排图，现在完全没必要。前者语义错误、维护成本高；后者必须清浮动，且 float 元素会脱离文档流，容易引发父容器高度塌陷。
典型症状：图片显示了，但下方内容紧贴着顶部，或者整个图区块在页面上“消失”——大概率是 float 没清除，或 <table> 的 border-collapse、cellpadding 混乱导致尺寸失控。
- 别为了“兼容 IE8”硬上
float；现代项目基本不需要支持这么老的浏览器 -
<table>只应在展示真正表格数据时使用，图片排版不属于该语义 - 如果必须兼容旧环境，用
inline-block+text-align组合比float更干净
响应式图片宽度要靠 max-width 和 height: auto
多图排版在手机上挤成窄条或溢出屏幕，往往是因为没控制图片宽度。单纯设 width: 100% 会让图片撑满父容器，但若父容器是 flex 且未设宽，可能失效；更可靠的是用 max-width。
推荐写法：<img src="..." style="max-width: 100%; height: auto;">。这样图片在窄屏下自动缩放，又不会失真拉伸。
- 别只设
width: 100%而忽略height: auto，否则图片会被压扁 - 若用
flex布局，可在父容器加flex-shrink: 0防止图片被压缩过度（但慎用，可能破坏响应式） - 加载大图时空白区域明显，可提前在
<img>上写width和height属性（HTML 属性，非 CSS），帮助浏览器预留空间
vertical-align 默认值（baseline），它会让底部留白，看着像没居中——这时候加一句 vertical-align: middle 就能解决。 
