display: flex 是排列图片最可控的方式，需父容器设 flex 并配合 justify-content、align-items、gap 等属性，响应式场景推荐 grid 替代 flex-wrap。
用 display: flex 排列图片最可控
纯 HTML5 本身不提供布局能力，真正起作用的是 CSS。现代项目中，display: flex 是排列多张图片最可靠的方式，尤其适合等宽/等高、居中、两端对齐等常见需求。
常见错误是直接给 <img alt="html5如何布局图片_html5图片排列与对齐方法" > 加 float 或滥用 inline-block，导致换行异常、间隙难控、垂直对齐失效。
- 父容器设
display: flex，子<img alt="html5如何布局图片_html5图片排列与对齐方法" >默认自动横向排列 - 用
justify-content控制水平对齐：flex-start（左）、center（居中）、space-between（两端） - 用
align-items控制垂直对齐：flex-start（顶对齐）、center（中对齐）、stretch（拉伸填满） - 图片加
max-width: 100%和height: auto防止溢出或变形
<div style="display: flex; justify-content: center; gap: 12px;"> <img src="a.jpg" alt="A" style="max-width:90%"> <img src="b.jpg" alt="B" style="max-width:90%"> <img src="c.jpg" alt="C" style="max-width:90%"> </div>
响应式图片排列必须用 flex-wrap 或 grid
固定一行排三张图，在手机上必然挤成一团或横向滚动。不加断点处理的 flex 布局在小屏下会失效。
flex-wrap: wrap 是基础解法，但更推荐 display: grid 配合 minmax() 实现真正自适应列数。
立即学习“前端免费学习笔记（深入）”；
- Flex 方案：父容器加
flex-wrap: wrap，并用width或flex-basis控制单图宽度（如flex: 0 0 calc(33.333% - 8px)） - Grid 方案更简洁：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，自动按容器宽度塞入尽可能多的 200px+ 图片列 - 别忘了给图片设
width: 100%，否则 grid 中图片可能不占满列宽
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;"> <img src="1.jpg" alt="1" style="max-width:90%"> <img src="2.jpg" alt="2" style="max-width:90%"> <img src="3.jpg" alt="3" style="max-width:90%"> </div>
vertical-align 只对 inline 元素有效，别乱用在块级图片上
很多人想让图片和文字垂直居中，随手写 vertical-align: middle，结果没反应——因为默认 <img alt="html5如何布局图片_html5图片排列与对齐方法" > 是 inline 元素，但一旦加了 display: block 或父容器用了 flex/grid，vertical-align 就彻底失效。
真正有效的做法取决于上下文：
- 图片+文字同行：保持
img为 inline，用vertical-align: middle对齐基线 - 图片独立居中（比如卡片内）：用 flex 容器 +
align-items: center，而不是依赖vertical-align - 图片在固定高容器中居中：设容器
display: flex，再加justify-content和align-items
旧项目慎用 float，text-align 只影响 inline 内容
float 已被现代布局取代，残留代码里常见 float: left 排图 + overflow: hidden 清浮动，但容易引发外边距塌陷、父容器高度丢失等问题。
text-align: center 看似能居中图片，其实只对 inline 或 inline-block 元素生效；如果图片是 display: block，它只会让文字居中，图片仍靠左。
- 想居中单张
block图片：用margin: 0 auto（需有明确宽度） - 想居中一组图片：不要套
text-align，改用 flex 或 grid - IE10 以下才需考虑
float回退方案，现在基本可忽略
图片排列看着简单，实际卡点常出在「默认 display 类型」和「父容器布局上下文」的错配。flex 和 grid 不是“高级技巧”，而是当前解决这类问题的最小必要工具。
