align属性在html5中已废弃，浏览器在标准模式下完全忽略它；应改用vertical-align处理图文混排，或用text-align、margin:0 auto、flex等css方案实现图片居中。
align 属性在现代 HTML 中已失效，不能可靠控制图片对齐 —— 无论你写 align="center"、align="left" 还是 align="middle"，在 HTML5 文档类型下浏览器会忽略它，或仅在 quirks mode 下偶然生效。
为什么 align 属性不再起作用
HTML5 标准彻底移除了 <img> 的 align 属性；W3C 明确将其标记为“过时（obsolete）”。浏览器厂商早已停止维护该属性的渲染逻辑，尤其在 声明下，它不参与布局计算。即使某些旧页面看似“还能用”，也只是因为浏览器兼容层在降级模式中兜底，并非标准行为。
- Chrome/Firefox/Edge 在 standards mode 下完全无视
align -
align="center"从不使图片在父容器中水平居中 —— 它本意是让图片与行内文字“垂直居中”，但连这个语义也已不可靠 - 使用
align会导致 HTML 验证失败（validator.w3.org 报错Attribute align is obsolete）
替代方案：图文混排时的 vertical-align
当图片和文字在同一行（如 <p>文字<img src="x.jpg">继续文字</p>），需调整图片相对于基线的位置，此时应使用 CSS 的 vertical-align：
-
vertical-align: middle：最常用，让图片中点与父行文字 x-height 中线对齐 -
vertical-align: top或bottom：对齐到行框顶部/底部，而非文字本身 -
vertical-align: text-top：对齐到字体顶部（比top更贴合文字） - 避免用
vertical-align: center—— 它实际是“半行高偏移”，行为反直觉
示例：<img src="icon.png" style="max-width:90%">
替代方案：独立图片的水平居中
如果图片是块级内容（单独一行、不与文字并排），居中必须靠父容器或自身 display 行为控制：
- 父容器加
text-align: center：适用于<img>默认为 inline 元素的情况 - 图片自身设
display: block; margin: 0 auto：更可控，不依赖父级文本对齐设置 - 用 Flex 布局：
<div style="display: flex; justify-content: center;"><img src="..."></div> - 绝对定位居中（慎用）：
position: absolute; left: 50%; transform: translateX(-50%)，需父容器position: relative
错误示范：<img src="x.jpg" align="center"> —— 这行代码在任何现代项目里都不该出现。
float 不等于 align，且与 flex 冲突
有人试图用 float: left 模拟旧 align="left" 效果，这虽能触发文字环绕，但引入了清除浮动的麻烦（得额外加 <div style="clear: both"></div>）。更要命的是：在 display: flex 父容器中，float 完全失效 —— 浏览器会直接忽略该声明。
真正需要图文环绕时，优先考虑 float + clear 组合；若目标只是“左/中/右摆放”，一律用 text-align、margin 或 flex。混用 float 和现代布局方式，是调试时最常被忽略的冲突源头。
