Kadence主题的全局图片对齐仅作用于wp-block-image区块，不生效于手动标签，因其绕过Kadence的JS注入与CSS作用域；可靠解法是为添加aligncenter等class或使用style="display:block;margin:0 auto"。

HTML图片在Kadence Theme里为啥不听全局对齐设置

因为kadence的「全局图片对齐」只管wp-block-image区块插入的图片，不管直接写标签的html——后者完全绕过kadence的css作用域，走浏览器默认渲染流。

常见错误现象：text-align: center加在.site-content上，但手写的还是左对齐；用Kadence的「全局样式→图像→对齐方式」设成居中，对毫无反应。

• 使用场景：需要在Classic Editor、自定义HTML模块、或子主题functions.php里动态输出图片时
• 根本原因：Kadence的全局对齐是靠JS注入class（如aligncenter）+配套CSS实现的，纯没class也没JS接管
• 兼容性影响：WordPress 6.0+默认禁用Classic Editor的「对齐」按钮，手写HTML更常见，这个问题反而更突出

Kadence主题下给手动加对齐的三种可靠写法

别碰style="text-align: center"包父容器——它可能被Kadence的max-width或display: block打断。直接控制自身最稳。

• 居中对齐（推荐）： —— 复用Kadence已有的.aligncenter规则，无需额外CSS
• 右对齐： —— 注意Kadence默认.alignright带float: right，可能影响后续段落流，需配合clear: both清浮动
• 响应式居中（无class依赖）： —— 绕过所有主题CSS干扰，但失去Kadence的间距/边框等配套样式

想让所有自动继承Kadence全局对齐？得改CSS作用域

Kadence默认CSS选择器类似.wp-block-image.aligncenter img，天然排除了孤立。强行扩展会影响性能，且可能误伤第三方插件图片。

安全做法是加一条窄范围规则，比如只作用于Classic Editor输出的HTML：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

body .entry-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

注意两点：

• 别用img { ... }全局匹配——会覆盖图标字体、SVG、后台按钮等所有
• 权重必须高于Kadence默认规则（当前是body .entry-content img vs .wp-block-image img），否则无效
• 如果用了Kadence的「自定义CSS」入口，粘贴后要清空WP Super Cache或浏览器缓存，否则看不到效果

Kadence Block Editor里混用HTML和图片区块的对齐冲突

在Kadence的Custom HTML区块里写，和旁边Image区块放一起时，常出现高度错位或对齐不一致——因为前者走内联样式逻辑，后者走区块class逻辑。

• 解决思路：统一用Kadence的Image区块，哪怕只是粘贴URL——它会自动加wp-image-xxx class和响应式srcset
• 若必须用Custom HTML，给加上height和width属性（即使值为auto），能避免Chrome下因异步加载导致的重排抖动
• 容易踩的坑：Custom HTML区块默认关闭「对齐选项」，需在区块侧边栏点开「Advanced → Additional CSS Class」手动填aligncenter

真正麻烦的是嵌套场景：比如用Code Block输出图片再套一层Container，这时候对齐逻辑就变成三层CSS层叠，得用浏览器开发者工具逐层关掉margin和text-align才能定位到哪一级在捣鬼。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！