Neve主题下Gutenberg图片对齐失效，因主题强制居中覆盖区块类；解决需加CSS .wp-block-image img { display: inline; } 并配合 float: left 实现图文环绕，注意懒加载与响应式适配。
Neve主题下图片在Gutenberg里不听使唤？先关掉“强制居中”
neve默认会把img标签包裹进.aligncenter容器，并加text-align: center样式，导致gutenberg选的左对齐/右对齐失效。这不是你操作错，是主题css优先级盖过了区块本身的alignleft/alignright类。
实操建议：
- 进WordPress后台 → 外观 → 自定义 → 额外CSS，粘贴：
.wp-block-image img { display: inline; }（解除Neve对图片的强制块级+居中） - 确保Gutenberg里图片区块的“对齐方式”设为
left或right，不是center - 如果用的是
wp-block-group或wp-block-cover套着图片，要额外检查父容器有没有text-align: center内联样式
Gutenberg原生对齐类为什么没生效？查清class名和作用域
Gutenberg输出的图片区块实际带的是wp-block-image容器 + alignleft/alignright类，但Neve的CSS规则.neve-main .entry-content img权重更高，直接无视这些类。
实操建议：
- 右键图片 → 检查元素，确认最外层区块容器是否有
alignleft（不是wp-block-image alignleft这种嵌套写法，而是wp-block-image alignleft整体存在） - Neve 4.0+版本开始支持
wp-block-image.alignleft img这类更精确的选择器，升级主题可省去手动加CSS - 避免用“经典编辑器”混搭Gutenberg——经典编辑器插入的图片走
wp-image-xxxclass，和Gutenberg的对齐机制完全不兼容
需要文字环绕图片？别只靠alignleft，得配float或grid
单纯加alignleft只控制图片在行内块级容器里的位置，不会触发文字环绕。Gutenberg默认用display: block，文字自然换行到下一行。
实操建议：
- 在“额外CSS”里补一句：
.wp-block-image.alignleft img { float: left; margin-right: 1em; }（float才真正实现图文环绕） - 如果页面用了CSS Grid布局（比如Neve的首页模板），
float可能被重置，此时改用grid-column-start配合wp-block-group手动分栏更稳 - 注意移动端：
float在小屏上容易撑破容器，加@media (max-width: 768px) { .wp-block-image.alignleft img { float: none; } }兜底
为什么上传新图后对齐又乱了？检查图片尺寸和懒加载干扰
Neve自带的懒加载（Lazy Load）会在图片加载前先占位一个data-src空img，这时CSS对齐规则还没应用到真实图片上；另外，如果图片原始尺寸远大于容器（比如上传了3000px宽的图），浏览器渲染时会先按大图计算布局，再缩放，造成对齐偏移。
实操建议：
- 进Neve设置 → 性能 → 关掉“图像懒加载”，测试是否恢复对齐（确认是不是懒加载JS注入的临时DOM搞的鬼）
- 上传前用工具把图片宽度压缩到不超过
content容器最大宽（Neve默认约750px），避免浏览器缩放干扰布局流 - 如果必须保留懒加载，加一段JS等
load事件后再触发img重排：document.addEventListener('lazyloaded', e => e.target.closest('img').style.display = 'inline');
对齐问题从来不是单点故障，往往是Neve的CSS、Gutenberg的class生成逻辑、浏览器渲染顺序、图片加载时机四者叠在一起的结果。调一个地方就见效，大概率是压住了其中一环，而不是根治了问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
