text-align: right 对 <img> 无效，因其仅控制行内内容在行框内的对齐，而图片需块级定位；应改用 float: right、margin-left: auto 配合 display: block 或 Flex 布局。
直接说结论： text-align: right 对 <img> 本身无效，是因为它只作用于**行内内容的对齐方式**，而图片默认是行内元素，但“右对齐”需要的是**块级容器内的定位控制**——得让图片脱离文本流或换用更可控的布局方式。
为什么 text-align: right 看起来没用
常见错误现象：给图片父容器（比如 <p> 或 <div>）加了 text-align: right，但图片还是贴左、或只在行末空隙里右移一点，甚至被截断。
原因很简单：text-align 不移动元素本身，它只是调整**行内内容在行框内的对齐位置**。如果图片是单独一行、且父容器不够宽，它就“无处可右”；如果父容器有文字，图片会和文字一起参与对齐，但受 vertical-align 和换行逻辑影响，结果不可控。
使用场景：你只想让一张图靠右显示，不希望它影响周围文字流，也不需要响应式缩放干预。
立即学习“前端免费学习笔记（深入）”；
- 别对父容器用
text-align: right来“强行右对齐图片” - 别给
<img>直接设text-align（无效，该属性不能写在行内元素上） - 注意图片是否被包裹在
<p>里——<p>默认有上下 margin，可能造成视觉错位
float: right 是最直接的兼容方案
这是老方法，但至今有效，尤其在不需要 Flex/Grid 的简单排版中。
实操建议：
- 给
<img>加float: right，它会脱离文档流，向右浮动 - 必须跟一个清除浮动的元素（如
<div style="clear: both"></div>），否则后续内容会上浮到图片下方右侧 - 如果图片后有文字，文字会自动绕排——这可能是你想要的，也可能不是；若不想要环绕，加
display: block和margin-left: auto更稳妥 - IE8+ 完全支持，现代浏览器无兼容问题
示例：
<img src="logo.png" style="float: right; margin-left: 16px;"> <div style="clear: both"></div>
用 margin-left: auto 配合 display: block
这是更现代、更干净的做法，适合单图右对齐，不希望文字环绕，也不依赖浮动。
关键点：
-
<img>默认是行内元素，必须先设display: block才能用margin控制定位 - 设
margin-left: auto后，浏览器会把剩余空间全分给左边 margin，图片就被“挤”到右边 - 如果父容器是
width: 100%的块级元素，这招 100% 有效 - 不触发 BFC，不影响其他布局逻辑，比
float更轻量
示例：
<img src="icon.png" style="display: block; margin-left: auto;">
Flex 布局：适合容器内多元素统一右对齐
如果你的图片在某个卡片、标题栏或工具区里，而且未来可能加按钮、文字等其他元素，用 Flex 最省心。
实操要点：
- 对图片的**父容器**设
display: flex和justify-content: flex-end - 不需要改
<img>本身样式，它自动成为 flex item - 如果父容器还有 padding/margin，注意它们会影响最终位置；必要时加
box-sizing: border-box - IE10+ 支持，移动端完全没问题；但若需支持 IE9 及更早，别用这个
示例：
<div style="display: flex; justify-content: flex-end;"> <img src="avatar.jpg"> </div>
真正容易被忽略的是：右对齐不是孤立动作，它总和容器宽度、图片尺寸、周围内容流耦合在一起。哪怕用了 margin-left: auto，如果父容器 width 没设好，或者图片本身超宽，它照样溢出或撑破布局。动手前先 inspect 一下父容器的实际渲染尺寸，比猜 CSS 更快定位问题。
