Kadence主题的全局图片对齐仅作用于wp-block-image区块，不生效于手动标签，因其绕过Kadence的JS注入与CSS作用域；可靠解法是为添加aligncenter等class或使用style="display:block;margin:0 auto"。
HTML图片在Kadence Theme里为啥不听全局对齐设置
因为kadence的「全局图片对齐」只管wp-block-image区块插入的图片，不管直接写<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >标签的html——后者完全绕过kadence的css作用域，走浏览器默认渲染流。
常见错误现象：text-align: center加在.site-content上，但手写的<img src="..." alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >还是左对齐；用Kadence的「全局样式→图像→对齐方式」设成居中，对<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >毫无反应。
- 使用场景：需要在Classic Editor、自定义HTML模块、或子主题
functions.php里动态输出图片时 - 根本原因：Kadence的全局对齐是靠JS注入class（如
aligncenter）+配套CSS实现的，纯<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >没class也没JS接管 - 兼容性影响：WordPress 6.0+默认禁用Classic Editor的「对齐」按钮，手写HTML更常见，这个问题反而更突出
Kadence主题下给<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >手动加对齐的三种可靠写法
别碰style="text-align: center"包父容器——它可能被Kadence的max-width或display: block打断。直接控制<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >自身最稳。
- 居中对齐（推荐）：
<img src="..." class="wp-image-123 aligncenter" alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >—— 复用Kadence已有的.aligncenter规则，无需额外CSS - 右对齐：
<img src="..." class="alignright" alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >—— 注意Kadence默认.alignright带float: right，可能影响后续段落流，需配合clear: both清浮动 - 响应式居中（无class依赖）：
<img src="..." style="max-width:90%" alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >—— 绕过所有主题CSS干扰，但失去Kadence的间距/边框等配套样式
想让所有<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >自动继承Kadence全局对齐？得改CSS作用域
Kadence默认CSS选择器类似.wp-block-image.aligncenter img，天然排除了孤立<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >。强行扩展会影响性能，且可能误伤第三方插件图片。
安全做法是加一条窄范围规则，比如只作用于Classic Editor输出的HTML：
立即学习“前端免费学习笔记（深入）”；
body .entry-content img {
display: block;
margin-left: auto;
margin-right: auto;
}
注意两点：
- 别用
img { ... }全局匹配——会覆盖图标字体、SVG、后台按钮等所有<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" > - 权重必须高于Kadence默认规则（当前是
body .entry-content imgvs.wp-block-image img），否则无效 - 如果用了Kadence的「自定义CSS」入口，粘贴后要清空WP Super Cache或浏览器缓存，否则看不到效果
Kadence Block Editor里混用HTML和图片区块的对齐冲突
在Kadence的Custom HTML区块里写<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >，和旁边Image区块放一起时，常出现高度错位或对齐不一致——因为前者走内联样式逻辑，后者走区块class逻辑。
- 解决思路：统一用Kadence的
Image区块，哪怕只是粘贴URL——它会自动加wp-image-xxxclass和响应式srcset - 若必须用
Custom HTML，给<img alt="HTML图片怎么用Kadence Theme全局对齐_Kadence主题全局样式控制" >加上height和width属性（即使值为auto），能避免Chrome下因异步加载导致的重排抖动 - 容易踩的坑：
Custom HTML区块默认关闭「对齐选项」，需在区块侧边栏点开「Advanced → Additional CSS Class」手动填aligncenter
真正麻烦的是嵌套场景：比如用Code Block输出图片再套一层Container，这时候对齐逻辑就变成三层CSS层叠，得用浏览器开发者工具逐层关掉margin和text-align才能定位到哪一级在捣鬼。
