Builder.io 图片对齐失效的根本原因是未设置 display 或 flex 上下文：图片默认为 inline 元素，text-align 仅在块级父容器中生效；需手动设 display: block 或用 flex 容器包裹并配 justify-content，同时注意 width 约束与 box-sizing 一致性。
Builder.io 里图片对齐失效，是因为没设 display 或 flex 上下文
Builder.io 拖拽放进去的图片默认是 inline 元素，text-align 只对行内元素在父容器中生效，但前提是父容器得是块级且有明确的文本对齐上下文。很多用户拖完图片点“居中”，结果不动——不是 Builder 没反应，是生成的 HTML 缺少包裹层或 display 重置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Builder 中选中图片组件 → 右侧面板找
Styles→ 手动加display: block（否则margin: 0 auto不生效） - 如果要和文字混排对齐，把图片和文字一起拖进一个
Container，再给该容器设display: flex+justify-content: center - 避免直接在图片上设
float：Builder 生成的代码会自动加内联样式，但float容易引发父容器塌陷，且响应式断点里难维护
Builder.io 导出的 HTML 图片居左/居右，但预览正常、上线后错位
常见于用 text-align: right 给父容器设对齐，但父容器宽度没约束（比如默认 100% 宽），导致图片看似靠右，实际只是“在超宽容器里右对齐”。上线后因 CSS 重置、全局 box-sizing 差异或外层框架 padding，立刻偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出前，在 Builder 中选中图片父容器 →
Width设为fit-content或具体值（如600px），再配text-align: right - 导出 HTML 后，检查生成的 class 名，手动补一句
box-sizing: border-box到对应 class，防止 padding/border 累加撑开 - 别依赖 Builder 自动生成的
style属性做复杂对齐；导出后优先用外部 CSS 覆盖，例如：.builder-img-wrapper { text-align: right; width: fit-content; margin-left: auto; }
Builder.io 拖拽图片后想响应式居中，但 md:mx-auto 类不生效
Builder.io 默认导出的是纯 HTML + 内联 style，不带 Tailwind 类名解析能力。md:mx-auto 这类工具类只有在项目已接入 Tailwind CSS 且配置了 JIT 编译时才有效。直接粘贴到没 Tailwind 的页面里，就是一串无意义字符串。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认你的目标页面是否真的加载了 Tailwind CSS（检查
<head>里有没有cdn.tailwindcss.com或本地 build 后的 CSS 文件） - 如果没用 Tailwind，导出后删掉所有
md:、lg:前缀，改用媒体查询手动写：@media (min-width: 768px) { .my-img { margin: 0 auto; } } - Builder 的响应式断点（mobile/tablet/desktop）和 Tailwind 默认断点不完全对齐，
tablet在 Builder 里是 768–1023px，而 Tailwindmd是 768px 起——数值虽同，但行为可能因父容器继承而不同，建议导出后实测
width 和 display 组合是否真正闭合了布局上下文。 
