Cookery Lite主题图片对齐必须通过古腾堡区块设置或包裹容器使用alignleft/center/right类，因主题强制img为block且过滤内联样式，直接对img设align、float或text-align均无效。
HTML图片对齐在Cookery Lite里根本不起作用
cookery lite主题默认禁用大部分html内联样式，align属性、style="float:left"甚至class加css都会被过滤或忽略。wordpress的编辑器（尤其是block editor）还会自动剥离你手动写的对齐类。
- 它依赖的是WordPress原生的
wp-block-image区块逻辑，不是传统HTML - 后台“经典编辑器”下插入图片时点对齐按钮，实际生成的是带
aligncenter/alignright类的<figure>结构，不是<img align="right"> - 如果切到“代码编辑器”手写
<img src="..." class="alignright">，主题CSS里可能压根没定义这个类，或者被!important覆盖了
Cookery Lite真正生效的图片对齐方式
必须走WordPress块系统+主题预留的CSS类组合。Cookery Lite只认alignleft、aligncenter、alignright这三个类，且只对<figure>或<div>容器生效，不支持直接挂在<img>上。
- 在古腾堡编辑器里选中图片区块 → 右侧“区块设置”→“对齐”选“左对齐/居中/右对齐”，这是唯一可靠路径
- 如果必须手写HTML（比如在自定义HTML区块里），得套一层
<div class="alignright"><img src="..."></div>，不能只给<img>加类 - 主题CSS中
.alignright img有float: right，但同时设置了margin: 0 0 1em 1em，文字环绕时右侧留白固定为1em，没法通过style覆盖
为什么float和text-align都失效了
Cookery Lite的style.css里有一条强制规则：img { display: block; margin-left: auto; margin-right: auto; }。这条规则会干掉所有text-align对<img>的影响，也让float在未包裹容器时无法触发文字环绕。
-
text-align: right只对行内元素有效，而display: block让<img>变成块级，对齐失效 -
float需要父容器有足够宽度且未触发BFC（比如没设overflow: hidden），但Cookery Lite的.entry-content加了overflow-wrap: break-word，间接影响浮动流 - 想临时绕过，只能在自定义HTML区块里写：
<div style="float:right; width:300px;"><img src="..."></div>，但响应式会崩，手机端图片可能溢出
自定义对齐又不想改主题文件？用add_theme_support补救
Cookery Lite本身没启用alignwide和alignfull，但你可以通过子主题的functions.php开启，并补充CSS。
- 在子主题
functions.php里加：add_theme_support( "align-wide" ); - 然后在子主题
style.css里补：.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; } - 注意：这个支持只对古腾堡区块有效，对经典编辑器粘贴的HTML无效
- 如果用了缓存插件，改完要清缓存，否则新CSS不加载
最麻烦的其实是图片尺寸和容器宽度不匹配时，alignright会让文字从图片下方开始流，而不是紧贴右侧——这和主题里figure的margin-bottom和img的height计算有关，调一次就得测三台设备。
立即学习“前端免费学习笔记（深入）”；
