Kubio Builder中HTML图片不居中、错位、被裁剪的根本原因是其将视为纯文本内联元素，不继承区块对齐设置且不响应图文环绕开关；需改用HTML模块+显式容器包裹，并在额外CSS中定义.kubio-img-wrapper{text-align:center}及img{max-width:100%;height:auto;display:inline-block}实现响应式居中。
HTML图片在Kubio Builder里不居中、错位、被裁剪
根本原因是 Kubio Builder 默认把 <img alt="HTML图片怎么在Kubio Builder中排版_Kubio主题+构建器图文对齐" > 当作纯文本内联元素处理，而你手写的 HTML 没带 CSS 重置或容器约束。它不会自动继承区块的对齐设置，也不会响应「图文环绕」开关。
- 直接粘贴
<img src="..." alt="HTML图片怎么在Kubio Builder中排版_Kubio主题+构建器图文对齐" >到富文本模块，图片会顶左对齐，且高度撑开行高，上下留白异常 - 用
<figure><img alt="HTML图片怎么在Kubio Builder中排版_Kubio主题+构建器图文对齐" ><figcaption></figcaption></figure>也不行——Kubio 不解析语义标签的默认样式 - 加
style="display: block; margin: 0 auto;"能居中，但一旦切换设备预览，可能失效（因为 Kubio 的响应式断点会覆盖内联样式）
Kubio 中让 HTML 图片响应式居中且图文不分离
必须绕过富文本模块，改用「HTML 模块」+ 显式容器包裹。Kubio 对 HTML 模块的 CSS 隔离更弱，更容易接管样式。
- 在页面中添加「HTML 模块」，不要用「富文本」或「标题+图片」组合模块
- 写成：
<div class="kubio-img-wrapper"> <img src="https://example.com/photo.jpg" alt="描述"> </div>
- 在主题自定义 → 「额外 CSS」里加：
.kubio-img-wrapper { text-align: center; } .kubio-img-wrapper img { max-width: 100%; height: auto; display: inline-block; } - 如果需要图文环绕（比如文字绕图右），把
display: inline-block改成float: left，并给图片加margin-right: 1rem，同时确保父容器有overflow: hidden防止文字塌陷
为什么不用 Kubio 自带的「图片模块」而手写 HTML
自带模块看似方便，但导出后生成的是带大量内联 data- 属性和 JS 初始化逻辑的代码，一旦你后期想微调尺寸、懒加载或加 srcset，就得反向破解它的渲染逻辑。
- 手写
<img alt="HTML图片怎么在Kubio Builder中排版_Kubio主题+构建器图文对齐" >可直接控制srcset、sizes、loading="lazy"，Kubio 不拦截这些原生属性 - 自带模块强制生成
width/height内联值，容易导致响应式失真；手写可完全留空，靠 CSS 控制 - 如果你用 WebP + fallback，
<picture></picture>在 HTML 模块里能正常工作，在图片模块里会被过滤掉<source></source>标签
移动端图文对齐突然错乱的典型原因
不是代码写错了，而是 Kubio 的「移动设备编辑」开关开了之后，它会偷偷给所有模块加 max-width 和 padding，而你的 HTML 模块没被纳入该规则链——结果就是图片宽度按 100% 算，文字容器却被缩窄了。
立即学习“前端免费学习笔记（深入）”；
- 检查右上角是否亮着「? 移动端编辑」图标，亮着就说明当前在改移动样式
- 切回桌面视图，删掉移动端下误加的「宽度限制」或「内边距」，这类设置不会自动同步到 HTML 模块
- 更稳妥的做法：在额外 CSS 里用媒体查询单独约束，比如
@media (max-width: 768px) { .kubio-img-wrapper img { width: 90vw; max-width: none; } }
<img alt="HTML图片怎么在Kubio Builder中排版_Kubio主题+构建器图文对齐" >，而是意识到：你写的每段 HTML，都得自己扛起全链路的响应式、可访问性和样式隔离。 
