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></figure>结构,不是<img align="right"> - 如果切到“代码编辑器”手写
<img src="..." class="alignright">,主题CSS里可能压根没定义这个类,或者被!important覆盖了
Cookery Lite真正生效的图片对齐方式
必须走WordPress块系统+主题预留的CSS类组合。Cookery Lite只认alignleft、aligncenter、alignright这三个类,且只对<figure></figure>或<div>容器生效,不支持直接挂在<code><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计算有关,调一次就得测三台设备。











