Otter Blocks的图片对齐仅对Otter原生Image/Gallery区块生效，HTML块或自定义CSS会冲突；移动端默认禁用高级对齐以保障性能；覆盖样式需用高权重、区块ID锁定的选择器。
HTML图片对齐后Otter Blocks不生效？先确认区块是否真在Otter里
Otter Blocks 的「高级对齐选项」只对 Otter 自带的 Image 区块、Gallery 区块或通过 Otter 插件插入的媒体生效。如果你是直接在 Classic 编辑器或 HTML 块里写 <img align="right"> 或加 style="float:right"，Otter 完全感知不到——它压根没接管这个元素。
常见错误现象：
– 图片在预览里靠右，但 Otter 侧边栏的「Alignment」下拉菜单灰掉不可选
– 切换到「Block」视图后，图片变成孤立的 HTML 块，右上角没有 Otter 的控制手柄
– 用 Otter 的「Group」包裹了图片，但对齐选项仍不出现
- 检查区块类型：点击图片，看顶部工具栏是否显示
Image字样且图标是 Otter 风格（不是 WordPress 默认图标） - 别用「Custom HTML」块塞
<img>标签——删掉，改用 Otter 的Image区块重新上传或选择 - 如果已用 Group 包裹，确保 Group 本身是 Otter 的
Group区块（而非 Gutenberg 原生 Group），否则子项对齐不受控
Otter Image 区块的「Advanced Alignment」和 CSS float 冲突吗
会冲突，而且优先级很明确：Otter 的高级对齐是通过内联 style + CSS Grid 实现的，一旦你手动给图片加 float、display: inline-block 或外层容器设 text-align，Otter 的布局逻辑就会被覆盖或错位。
使用场景：想让图片右对齐并让文字环绕——这不是靠 float，而是 Otter 的 Wrap text 开关 + Alignment 联动控制的。
立即学习“前端免费学习笔记（深入）”；
- 关闭所有自定义 CSS：检查区块设置里的
Additional CSS Class是否填了类名，主题自定义 CSS 里是否写了针对.wp-block-image的float -
Wrap text必须开启，且Alignment设为Right或Left才触发环绕；设为Center时自动关闭环绕 - 注意「最大宽度」限制：
Max Width滑块调太小会导致即使设了右对齐，图片也卡在中间——因为 Otter 认为“不够宽，不值得绕排”
为什么 Otter 对齐选项在手机端失效或错位
Otter 的高级对齐默认只在桌面断点（≥981px）生效，移动端会回退到基础居中或块级堆叠，这是设计行为，不是 bug。如果你看到手机上图片突然居中、文字不再环绕，不是设置丢了，是 Otter 主动降级了。
性能影响：强制在移动端保持环绕会显著增加 CSS 复杂度和重排开销，Otter 选择用响应式断点规避——这点比硬塞 @media 手动覆盖更轻量。
- 不要在「Responsive Settings」里盲目开「Enable on mobile」——Otter 目前（v3.5+）尚未开放该开关，强行用 CSS 覆盖可能破坏区块结构
- 若必须移动端环绕，改用 Otter 的
Columns区块：左列放文字，右列放图片，设列宽比例（如 70%/30%），兼容性更稳 - 检查主题是否禁用了 Otter 的响应式样式表：查看页面源码，确认
otter-frontend.css是否加载成功，404 或 403 会导致对齐逻辑完全失效
用 CSS 覆盖 Otter 对齐时，哪些选择器安全、哪些会崩
直接改 .wp-block-image 或 img 全局样式大概率翻车，Otter 的内联 style 优先级很高，且会动态注入 data-* 属性干扰你的选择器。要覆盖，得用更高权重、更具体的路径。
容易踩的坑：加 !important 看似解燃眉之急，但 Otter 后续更新可能加更狠的 !important，或者改用 Shadow DOM，导致样式彻底失控。
- 安全的选择器：
.otter-block-image[data-id="xxx"] img（用区块唯一data-id锁定） - 可用但需谨慎：
.otter-block-image .wp-block-image__wrapper img（依赖 Otter 当前 DOM 结构，升级可能变） - 绝对避免：
img[align]、img[style*="float"]—— Otter 不再用这些属性，匹配不到 - 调试技巧：在浏览器开发者工具里右键图片 → «Edit as HTML»，临时删掉 Otter 注入的
style属性，看你的 CSS 是否立刻生效——能就说明选择器对了
复杂点在于 Otter 的对齐不是单一样式，而是 position、grid-area、margin、max-width 多组规则协同。改一个，常要同步调另一个，否则出现留白异常或文字截断。别指望一行 CSS 解决。
