Flex布局+媒体查询是响应式图片左右对齐最优解：父容器设display: flex，大屏用justify-content控制左右，小屏切column并用align-items统一左对齐；text-align在Flex/Grid中失效，因只作用于文本流；避免float、absolute等破坏文档流的方案。
用 Flex 布局 + 媒体查询控制左右对齐
响应式图片左右对齐，核心不是“让图片自己动”，而是让它的父容器在不同断点下切换 justify-content 值。Flex 是目前最可控、无塌陷、不绕图、易维护的方案。
常见错误是给 img 单独加 float 或 margin-left: auto，结果小屏时图片悬在右侧空白里，文字堆在左边——因为浮动脱离文档流，无法随视口自然回流。
- 父容器必须设
display: flex，且子元素（图片和相邻内容）要同级包裹，不能靠text-align混搭 - 大屏左右并排：
flex-direction: row+justify-content: space-between（左图右文）或justify-content: flex-start（全左） - 小屏堆叠：
@media (max-width: 768px) { .container { flex-direction: column; } }，此时左右对齐失效，改用align-items: flex-start统一左对齐 - 避免在媒体查询里重复写
img { width: 100% }；宽度应由父容器或max-width: 100%控制，对齐只管位置
为什么 text-align 在响应式中容易失效
text-align: right 看似简单，但一旦父容器变成 display: flex 或 display: grid，它就完全不起作用——text-align 只对行内内容在文本流中的对齐有效，而 Flex 容器已退出文本流。
更隐蔽的问题是：如果父容器有 padding、overflow: hidden，或图片被意外设了 float，text-align 表面写了，实际渲染却偏移、截断、甚至消失。
立即学习“前端免费学习笔记（深入）”；
- 只在纯块级流场景下用
text-align（比如一段文字里插一张图），别在 Flex/Grid 容器里混用 - 调试时优先检查 computed styles 中父容器的
display类型，再看text-align是否被继承或覆盖 - 响应式切换时，
text-align必须写在媒体查询内的父容器上，而不是直接作用于img
图片单独右对齐但不希望文字绕排
如果你只是想让一张 banner 图右对齐，旁边**没有文字**，那 float: right 是错的——它会引发清除问题、塌陷、且后续段落可能上浮到图下方。
正确做法是让图片脱离行内流，转为块级后“挤”到右边：
- 必须先设
display: block，否则margin-left: auto对行内元素无效 - 右对齐用
margin-left: auto，左对齐不用写 margin（默认靠左） - 父容器需是块级且宽度明确（如
width: 100%或没设固定宽但有max-width） - 响应式时，可在媒体查询中改为
margin: 0 auto实现小屏居中，无需改结构
绝对定位和 object-position 不该用于主图对齐
position: absolute 和 object-position 听起来像“精准控制”，但它们解决的是不同问题：
-
position: absolute会让图片彻底脱离布局流，小屏时right: 0很可能把图切掉一半，且后续内容会塌陷上来 -
object-position不移动图片位置，只调整图片内部可见区域的锚点（比如人脸始终露在左侧），它必须配合object-fit: cover才生效，对齐整张图无效 - 二者都适合装饰图标、头像裁剪等子场景，但**主图文对齐请坚持 Flex + 媒体查询**
真正容易被忽略的是：所有对齐效果最终都依赖父容器的盒模型是否干净——检查 padding、margin、box-sizing 和是否意外触发了 position: relative，比反复调 img 的样式更关键。
