结论：text-align需作用于父容器而非img标签，因它是块级容器属性，控制内部行内内容（如默认inline的img）在行框内的水平位置；直接设在img上无效。
直接说结论：用 text-align: left 或 text-align: right 作用于图片的父容器，是最简单、兼容性最好的左/右对齐方式；但前提是图片保持默认的行内元素行为，且父容器没被其他样式干扰。
为什么 text-align 要加在父容器上，而不是 <img> 标签本身？
text-align 是块级容器的属性，它控制的是“内部行内内容在行框内的水平位置”。<img> 默认是行内元素，所以它会响应父 <div>、<p> 等块级容器的 text-align 设置。直接给 <img> 写 text-align 无效，浏览器会忽略。
- 错误写法：
<img src="a.jpg" style="text-align: right;">（不起作用） - 正确写法：
<div style="text-align: right;"><img src="a.jpg"></div> - 如果父容器是
<p>，也要注意它自带上下 margin，可能造成视觉偏移
float: left 和 float: right 什么时候必须用？
当你需要文字环绕图片时，float 是唯一自然支持该效果的方案。比如图文混排的新闻稿、博客正文——文字会自动贴着图片左侧或右侧流动。
- 设了
float: right后，后续块级元素（如下一个<p>）可能会上浮到图片下方右侧，得加<div style="clear: both"></div>来清除浮动 -
float会让图片脱离文档流，如果父容器高度塌陷，需额外处理（比如触发 BFC） - IE8+ 全支持，现代项目中仍可靠，但语义不如 Flex 清晰
现代布局下，display: block + margin-left: auto 怎么用？
这是单图右对齐最干净的做法，不依赖浮动、不引发环绕、不破坏文档流。适合 banner 图、独立插图等“就一张图，旁边不要文字”的场景。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须先设
display: block，否则margin对行内元素无效 - 右对齐写
margin-left: auto，左对齐则不用动 margin（默认已靠左） - 居中对齐用
margin: 0 auto，但要求父容器有明确宽度（或width: 100%） - 注意：如果父容器有 padding，图片会相对于 padding 边缘对齐，不是容器可视区边缘
Flexbox 布局里怎么精准控制图片位置？
当父容器本身已是 Flex 容器（比如导航栏、卡片布局），别再套 text-align 或 float，直接用 justify-content 更可控。
- 左对齐：
justify-content: flex-start - 右对齐：
justify-content: flex-end - 图片默认就是 flex item，无需改
display - 如果父容器还包含文字或其他元素，确认是否要
flex-wrap: wrap，否则小屏可能溢出 - 慎用
position: absolute—— 它会让图片脱离布局流，响应式下容易错位，仅适合角标、装饰图标等非主内容
真正容易被忽略的是：图片对齐效果常被外层容器的 padding、margin、全局 CSS 重置（比如某些框架把 body 设为 text-align: center）悄悄覆盖。调试时先检查父级盒模型，而不是反复改 <img> 的样式。
