Gutenberg图片对齐失效的根本原因是区块align属性与主题CSS类未协同：必须通过区块设置面板选择对齐方式，并确保主题支持对应CSS类（如.alignright），手动改HTML会被覆盖。
WordPress Gutenberg 里图片对齐失效，其实是区块层级问题
直接说结论：Gutenberg 的图片对齐不是靠 HTML 的 align 属性或 CSS float 控制的，而是由区块自身的 align 属性 + 主题支持的 CSS 类共同决定。你手动在 HTML 模式里加 style="text-align: right" 或改 class="alignright"，很可能被区块重新渲染覆盖，或者主题压根没定义对应类。
怎么让图片在 Gutenberg 里真正按需左/中/右对齐
必须走区块原生对齐路径，不能绕开它去动 HTML：
- 选中图片区块，在右侧「区块设置」面板找「对齐方式」选项（不是「尺寸」里的「对齐」），选
left/center/right/wide/full - 确保主题支持这些对齐——检查主题的
functions.php是否有add_theme_support( 'align-wide' )；wide和full需要显式启用 - 如果选了
right却没效果，大概率是主题 CSS 没定义.alignright，或者定义了但被其他样式覆盖（比如用!important强行重置了margin） - 别在「编辑 HTML」模式里手写
class="alignright"——Gutenberg 会把它当静态 HTML 处理，失去区块响应能力，下次点进可视化编辑就丢对齐
为什么有时候对齐看起来“偏了”或“没反应”
常见现象是图片明明设了 right，却还是贴左，或者文字不环绕。这不是 bug，是三个地方没对上：
- 图片区块本身设置了
align="right"，但父容器（比如 Group 或 Cover 区块）设置了layout="constrained"，强制子区块居中，覆盖了图片对齐 - 主题 CSS 把
.wp-block-image .alignright的margin-left设成了auto，而没给margin-right留空间，导致视觉上“没动” - 用了「图像」区块以外的区块插图（比如「媒体与文本」区块里的图片），它的对齐逻辑独立，得在该区块内部单独设置，不能依赖外层图像区块的对齐开关
- 某些缓存插件或 CDN 缓存了旧版 CSS，改完主题样式后没清缓存，浏览器看到的还是没定义
.alignright的版本
想精细控制？绕不开 theme.json 或自定义 CSS
原生对齐只提供基础语义（左/中/右/宽/全宽），真要控制缩进距离、文字环绕方式、响应式断点行为，就得干预底层：
立即学习“前端免费学习笔记（深入）”；
- 在主题的
theme.json里配置settings.layout.definitions，定义不同对齐下的最大宽度和 margin 规则 - 如果主题没
theme.json，或不想动它，直接加自定义 CSS：比如.wp-block-image.alignright img { margin-left: 1.5em; }，但注意选择器优先级，可能需要加.wp-block-image前缀避免影响其他图片 - 不要用
!important硬顶——Gutenberg 5.9+ 后很多对齐类是用内联style注入的，CSS 里加!important可能反而被绕过 - 如果项目用 FSE 主题（如 Twenty Twenty-Four），
theme.json是唯一推荐路径；传统子主题仍可沿用style.css，但得确认是否被theme.json的样式规则覆盖
最常被忽略的是：Gutenberg 对齐不是“一次设置永久生效”，它依赖主题持续提供对应的 CSS 支持。换主题、升级主题、甚至启用了新插件，都可能让原本好用的 alignright 突然失灵——得回头查 CSS 是否还在、有没有被覆盖、有没有被禁用。
