响应式图片水平对齐应控制父容器而非直接操作img：因img默认行内元素，margin:auto无效；需用text-align（包div）或flex（justify-content）实现，注意box-sizing、float、position等对布局流的影响。
响应式图片的水平对齐不能靠给 <img> 单独加 text-align 或 align 属性解决——这些要么无效，要么已被废弃。真正可控、可维护的做法是控制父容器的对齐行为，而非反复重写图片尺寸或强行 hack margin。
为什么直接给 <img> 加 margin: 0 auto 常常不生效
因为 <img> 默认是行内元素，margin: auto 只对块级元素生效。即使写了，浏览器也忽略。常见错误还包括：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 没设
display: block就直接写margin-left: auto - 父容器有
float或position: absolute，导致文档流断裂 - 外层用了
text-align: right，但图片宽度小于容器，实际“右对齐”只是在行框里右偏，视觉上仍像居左
用 text-align 控制对齐（兼容旧环境）
最轻量、兼容性最好的方式：把图片包进一个 <div>，对这个容器设 <code>text-align，媒体查询只改它，不碰图片本身。
- 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { text-align: right; } } - 图片基础样式只需一次：
img { max-width: 100%; height: auto; display: block; }（display: block防止底部留白）
用 flex 实现更精确的响应式对齐
当需要和文字、按钮等其它元素协同布局，或未来可能扩展结构时，flex 是首选。关键点是只在媒体查询里切换 justify-content，不要重复定义图片宽高。
- 父容器设
display: flex，图片保持默认inline或显式设display: block都不影响对齐 - 居中：
justify-content: center；左对齐：justify-content: flex-start；右对齐：justify-content: flex-end - 如果父容器高度固定，加
align-items: center同时垂直居中 - 避免陷阱：别在 flex 容器上同时设
text-align，它会被忽略；也别给图片设float，会脱离 flex 上下文
容易被忽略的细节：盒模型与渲染流干扰
即使代码写对了，对齐仍错位，大概率是盒模型或流式上下文出了问题：
- 父容器有
padding但没设box-sizing: border-box，导致可用宽度变小，对齐基准偏移 - 图片外层用了
overflow: hidden且容器宽高固定，object-position或transform会裁切内容，影响对齐感知 - 响应式图片用了
srcset+sizes，但object-position的偏移值是基于最终加载图片的原始尺寸计算的，不是容器尺寸——这点常被当成 bug 报 - 调试建议：打开开发者工具，看 computed styles 中
display、box-sizing、width是否符合预期，再确认父容器是否被float或position拉离正常流
