结论：图片左右对齐取决于布局上下文，而非简单给加属性；text-align: right对图片无效，因它仅作用于块级容器内行内内容的对齐，而图片需通过float: right、display: block+margin-left: auto或flex布局实现右对齐。
直接说结论：图片左右对齐不是“给 <img> 加个属性就行”，而是取决于它所处的布局上下文——你得先搞清它是嵌在文字里、单独一行，还是和别的元素并排；选错方法，text-align: right 看似写了，实际根本不起作用。
为什么 text-align: right 对图片没反应
常见错误现象：父容器加了 text-align: right，但图片还是贴左、或只在行尾空隙里挪了一点，甚至被截断。
-
text-align不移动元素本身，只调整行内内容在“行框”内的对齐位置；如果图片是单独一行、父容器又窄，它就“没地方可右” - 图片默认是行内元素，和文字共享同一行框；一旦有换行、
vertical-align或其他内联样式干扰，对齐结果就不可控 - 千万别把
text-align写在<img>标签上——这个属性对行内元素无效，浏览器直接忽略
float: left / float: right 什么时候能用
适合图文混排场景，比如新闻正文里图片靠左、文字绕排。
- 必须直接加在
<img>上，例如：<img src="a.jpg" style="max-width:90%"> - 浮动会让图片脱离文档流，后续段落可能上浮到图片下方右侧，务必加清除（如
<div style="clear: both"></div>） - IE8+ 全支持，现代浏览器无兼容问题，但不推荐用于复杂容器——容易引发塌陷、重绘问题
- 如果不想文字绕图，别用
float；改用display: block+margin-left: auto
display: block + margin-left: auto 实现单图右对齐
这是目前最干净、最可控的单图右对齐方式，不触发 BFC，不影响周围布局。
- 必须先设
display: block，否则margin自动计算不生效 -
margin-left: auto会把剩余水平空间全分给左边，图片就被“挤”到右边 - 父容器要是块级且宽度明确（如
width: 100%），这招 100% 有效 - 示例：
<img src="logo.png" style="max-width:90%">
Flex 布局控制图片在容器中的左右位置
当你需要精确控制图片和其它元素（比如文字、按钮）的相对位置，或者未来可能扩展结构，Flex 是首选。
- 给父容器设
display: flex，再用justify-content控制水平对齐：flex-start（左）、center（居中）、flex-end（右） - 若父容器高度固定，还可配
align-items: center垂直居中 - 注意：如果父容器已有其他内容，检查是否需
flex-wrap: wrap防溢出 - 响应式切换对齐方式时，只在媒体查询里改
justify-content，不要重复定义图片尺寸
真正容易被忽略的是：图片对齐效果常被父容器的 padding、margin 或全局 CSS 重置规则干扰。调试时优先 inspect 父盒子的盒模型，而不是反复改 <img> 的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
