align 属性在 HTML5 中已废弃，不能依赖它做对齐控制；vertical-align 仅对行内上下文有效，图文并排时需结合 text-align、display: block、float 或 flex 布局实现精准对齐。
align 属性在 HTML5 中已废弃，浏览器仍可能解析，但不保证行为一致，**不能依赖它做对齐控制**。
为什么 align 属性不管用
它属于 HTML 4.01 时代的遗留属性，现代标准（HTML5）明确弃用；Chrome、Firefox、Safari 等主流浏览器对 align 的处理越来越松散，比如 align="right" 可能被忽略，或仅在极简文档中偶然生效；写在 <img> 标签里，如 <img src="a.jpg" align="center">，实际等同于没写。
vertical-align 只对行内上下文有效
当你把 <img> 和文字放在同一行（比如段落里），默认会“悬空”——因为 vertical-align: baseline 是它的初始值，下方留出字母 g/j/y 的下伸空间。
- 想让图片和文字视觉居中：给
<img>加vertical-align: middle - 想贴顶对齐：用
vertical-align: top（注意：不是text-top，后者对齐的是文本第一行的顶部，常有像素级偏差） - 若父容器是
display: flex或display: grid，vertical-align完全无效，得改用align-items - 表格单元格（
<td>）里图片“飘着”，直接加style="vertical-align: middle"就能压到底部对齐线
水平居左 / 居中 / 居右，看布局上下文选方案
没有万能写法，关键看图片所处的结构：
- 图片单独一行、需要居中：
<div style="text-align: center"><img src="x.jpg"></div>—— 简单有效，但父容器必须有明确宽度（比如没浮动、没position: absolute） - 图片要右对齐且不绕文：
<img src="x.jpg" style="display: block; margin-left: auto">—— 必须带display: block，否则margin-left: auto不生效 - 图文并排、文字绕图：用
float: right，但务必在后续元素前加<div style="clear: both"></div>防塌陷 - 需同时控制水平+垂直对齐，或未来要加按钮/文字：父容器设
display: flex; justify-content: flex-end; align-items: center，别往<img>上加display: flex
容易被忽略的细节
很多问题不是代码写错，而是上下文干扰：
立即学习“前端免费学习笔记（深入）”；
-
text-align: center写在<img>自身上，完全无效——这个 CSS 属性只作用于块级容器内的行内子元素 - 父容器用了
float或position: absolute，会破坏text-align的作用域 - 响应式场景下，
margin: 0 auto配合width才可靠；如果只设max-width: 100%而没给width，居中可能失效 - 旧 Android 浏览器（4.4 及以下）对 Flex 布局支持弱，
justify-content需补-webkit-justify-content
