HTML 图片默认是行内元素，会和文字基线对齐，导致下方留白——这不是 bug，是 CSS 默认行为；想精准控制位置，得用 vertical-align、display 或 flex，而不是靠 align 属性（已废弃）。
图片底部多出空白是怎么回事
这是最常被误认为“图片没对齐”的问题：图片作为 inline 元素，默认按 baseline 对齐，而基线在字母 x 底部，不是整个盒子底边，所以图片下方会空出约 4px 的间隙。
- 现象：
<img src="a.jpg" alt="html图片位置怎么调整_html图片对齐方式设置【详解】" >后面跟文字，图片底下总有一条小空白 - 原因：
vertical-align: baseline（默认值） + 行高（line-height）参与计算 - 快速修复：给
<img alt="html图片位置怎么调整_html图片对齐方式设置【详解】" >加vertical-align: top/middle/bottom，或改display: block - 注意：
vertical-align只对inline和table-cell元素生效，设成block后它就失效了
让图片居中显示的三种可靠方式
别用 align="center"（HTML5 已不支持），也别只靠 text-align: center（它只影响行内子元素，且需父容器是块级）。
- 单图水平居中：
display: block+margin: 0 auto（最常用、兼容性好） - 图文混排居中：
display: flex+justify-content: center+align-items: center（推荐新项目） - 绝对定位居中：父容器
position: relative，图片position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)（适合覆盖层等场景） - 避坑：
text-align: center对父容器本身无效，必须作用于图片的直接父块级元素
float 还能用来布局图片吗
能，但不建议。它曾是图文环绕的主要手段，现在已被 display: flex 和 CSS Grid 替代，且遗留问题多。
立即学习“前端免费学习笔记（深入）”；
- 常见副作用：
float会脱离文档流，导致父容器高度塌陷（需清浮动，如overflow: hidden或伪元素::after） - 响应式困难：
float无法自动换行对齐，移动端适配成本高 - 替代方案：用
display: grid做图文网格，或flex-wrap: wrap控制换行 - 例外场景：旧系统维护、需要 IE8 兼容时仍可能用到
float，但务必加清除
真正麻烦的不是“怎么放”，而是“放完之后其他元素怎么响应”——比如文字绕图后行高变化、响应式断点下对齐逻辑切换、或者 img 在 flex 容器里被拉伸。这些细节往往要结合具体 DOM 结构和 CSS 继承链来看，不能只套一个 class 就完事。
