SiteOrigin图片对齐需用其Image小工具设置，非经典编辑器按钮；图文环绕推荐CSS Grid替代float；响应式需手动媒体查询覆盖；CSS覆盖时注意width/height冲突及缓存问题。
图片对齐按钮没反应？检查是否在SiteOrigin小工具内操作
SiteOrigin的图片对齐不是靠WordPress经典编辑器或Gutenberg的浮动按钮，而必须在SiteOrigin专属的小工具里设置。常见错误是：把图片直接粘贴进“文本小工具”或“HTML小工具”，结果alignleft、aligncenter这些class不生效——因为那些小工具不解析对齐逻辑。
- 正确做法：用
Image小工具（不是“媒体”或“自定义HTML”），上传后点小工具右上角齿轮图标，在Alignment下拉菜单选Left/Center/Right - 如果已用错小工具，删掉重加
Image小工具，别试图手动加style="float:left"——SiteOrigin会覆盖内联样式 - 注意：某些主题会禁用
Image小工具的对齐选项，此时需检查主题的functions.php是否调用了add_theme_support('align-wide')，但这和SiteOrigin对齐无关，别混淆
文字环绕图片时布局错乱？优先用CSS Grid而非float
SiteOrigin默认用float实现图文环绕，但现代浏览器对float兼容性差，尤其配合Flex/Grid容器时容易塌陷、换行异常。真实场景中，你更可能遇到文字从图片下方整个断开，而不是优雅绕排。
- 解决方案：在
Image小工具的Advanced→Custom CSS Class里填so-img-wrap，然后在主题自定义CSS里加：
.so-img-wrap {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
}
.so-img-wrap img {
grid-row: 1 / -1;
}
alignleft生成的float，它无法控制文字行高、首行缩进，且移动端几乎必然失效float方案，但得在Image小工具的Additional CSS框里手动写clear: both;防后续模块错位响应式下图片对齐失效？关键看断点配置位置
SiteOrigin的对齐设置本身不带响应式断点——你设了Center，它就在所有屏幕尺寸下居中。所谓“移动端左对齐、桌面端居中”，得靠CSS媒体查询手动覆盖，不能指望小工具界面里的对齐下拉菜单。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
Image小工具的Advanced→Custom CSS Class里加一个唯一类名，比如hero-img-responsive - 然后在外观 → 自定义 → 额外CSS里写：
@media (max-width: 767px) {
.hero-img-responsive img {
display: block;
margin: 0 auto;
}
}
@media (min-width: 768px) {
.hero-img-responsive img {
float: right;
}
}
Additional CSS框里直接写媒体查询——那个框只作用于当前小工具，且不支持嵌套@media
img元素是否被你的类名命中，而不是被SiteOrigin生成的aligncenter class覆盖用CSS覆盖对齐后图片变模糊？检查width和height属性冲突
当你手动加CSS让图片居中或缩放，SiteOrigin可能仍保留原始width和height属性（尤其是上传时勾选了“调整大小”的图片），导致浏览器强行拉伸渲染，出现像素化。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：在
Image小工具的Advanced→Additional CSS里加width: auto; height: auto;，或者更稳妥地用max-width: 100%; height: auto; - 如果图片来自外部URL（非媒体库上传），SiteOrigin不会自动加尺寸属性，但你的CSS可能被主题样式劫持——用开发者工具检查
computed面板，确认width最终值是不是auto - 特别注意：某些缓存插件会缓存内联
style标签，改完CSS后清空对象缓存，别只刷浏览器
Image小工具和WordPress原生图片处理是两套逻辑——混用就会互相覆盖。对齐效果出不来时，先关掉所有其他插件，用浏览器检查元素，盯住class和style链里谁在最后生效。 
