CoBlocks图文对齐失效主因是图文未置于同一容器块（Columns/Group），导致Flex布局无法联动；须用Columns块实现左右布局或Group块+自定义CSS基线对齐，禁用传统align类。
CoBlocks 图文对齐失效的常见原因
coblocks 的 image 块默认用 flex 布局，但文字如果不在同一 block 内（比如用普通段落紧挨着图片块），css 就不会自动联动对齐——这是 90% 对齐失败的根源。
- 文字和图片必须放在同一个
Columns块或Group块里，否则 CoBlocks 不会把它们当“一组”处理 -
Image块单独拖进编辑器时，右侧“设置侧边栏”里的Alignment选项只影响图片自身在列内的位置（左/中/右），不控制文字环绕 - 如果用了经典编辑器遗留的 HTML 图片标签（
<img alt="HTML图片怎么用CoBlocks对齐文字_CoBlocks图文混排对齐技巧" >），CoBlocks 完全不接管其样式，对齐功能直接失效
用 Columns 块实现左图右文 / 右图左文
这是最稳定、兼容性最好的方式，绕过所有浮动和 CSS 冲突。
- 插入一个
Columns块（2 列）→ 左列放Image块，右列放Paragraph块 - 选中
Image块，在右侧设置里调Width为100%，避免图片撑破列宽 - 右列文字默认顶部对齐；如需垂直居中，在
Columns块设置中打开Align Content→ 选Center - 注意：移动端下 CoBlocks 默认堆叠列，若需保持左右布局，得在
Columns设置里关掉Stack on Mobile
Group 块 + 自定义 CSS 实现图文基线对齐
当需要图片和第一行文字“底部对齐”（比如图标+标题），Columns 的顶部对齐不够用，就得上轻量 CSS。
- 把
Image和Heading（或Paragraph）一起包进Group块 - 给
Group块添加自定义 CSS 类名，比如icon-text-inline - 在主题的
Additional CSS或子主题style.css中加：
.icon-text-inline {
display: inline-flex;
align-items: baseline;
gap: 0.5em;
}
- 关键点：
align-items: baseline让图片底边和文字基线对齐，比center更符合阅读习惯 - 别用
float或display: inline-block—— CoBlocks 的 Block 样式会覆盖它们，且破坏响应式
为什么不用 Classic Editor 的 alignleft/alignright？
因为 CoBlocks 是 Block Editor 原生扩展，它不识别传统 alignleft 这类 class，也不监听 img 的 align 属性。强行写进去只会让图片偏移，文字却不动，看起来像错位。
- 检查浏览器开发者工具，会发现 CoBlocks 渲染出的
<figure></figure>结构里根本没有alignleftclass - 即使通过 Custom HTML 块硬塞
<img class="alignright" alt="HTML图片怎么用CoBlocks对齐文字_CoBlocks图文混排对齐技巧" >，WordPress 12+ 会自动剥离这个 class，视为不安全属性 - 真正起作用的是 Block 层级的布局容器（Columns / Group），不是单个图片的 class
图文混排的复杂点从来不在“怎么摆”，而在于“谁在控制布局层级”。CoBlocks 把控制权交给了容器块，而不是元素本身——这点容易被视觉编辑器惯坏的人忽略。
立即学习“前端免费学习笔记（深入）”；
