Spacious主题图片默认左对齐，需在“额外CSS”中添加.entry-content img.aligncenter{display:block;margin:0 auto;}实现居中，右对齐用.entry-content img.alignright{float:right;margin-left:1em;}，响应式下需加媒体查询覆盖。
图片在Spacious主题里默认左对齐，怎么改成居中或右对齐
Spacious主题的图片默认靠左，是因为它给 <img alt="HTML怎么在Spacious主题中调整图片对齐_Spacious博客主题布局优化" > 标签加了 alignleft 类（通过 WordPress 的编辑器自动添加），而主题 CSS 又没给 aligncenter 或 alignright 提供足够强的样式覆盖。
实操建议：
- 在编辑器里选中图片 → 点「对齐方式」按钮 → 选「居中」，WordPress 会自动加
aligncenter类，但 Spacious 默认不响应这个类，需要手动补 CSS - 进「外观 → 自定义 → 额外 CSS」，粘贴这段（适配居中）：
.entry-content img.aligncenter { display: block; margin-left: auto; margin-right: auto; } - 右对齐同理，补：
.entry-content img.alignright { float: right; margin-left: 1em; }（注意：float会影响后续段落流式布局，慎用）
用 style 属性强行对齐为什么有时失效
直接在图片 HTML 里写 style="text-align: center;" 没用 —— text-align 对行内元素（如 <img alt="HTML怎么在Spacious主题中调整图片对齐_Spacious博客主题布局优化" >）本身无效，它只作用于其**子内容**；想让图片居中，得让它变成块级元素再用 margin。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
<img src="x.jpg" style="max-width:90%" alt="HTML怎么在Spacious主题中调整图片对齐_Spacious博客主题布局优化" >→ 完全没变化 -
<img src="x.jpg" style="max-width:90%" alt="HTML怎么在Spacious主题中调整图片对齐_Spacious博客主题布局优化" >→ 也不生效，因为缺少display: block
正确写法（仅限单图临时调整）：
<img src="x.jpg" style="max-width:90%" alt="HTML怎么在Spacious主题中调整图片对齐_Spacious博客主题布局优化" >
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
主题更新后自定义 CSS 被清空怎么办
Spacious 主题升级时不会保留「额外 CSS」里的内容，这是 WordPress 自定义功能的通病，不是主题 bug。
解决思路：
- 把关键 CSS 存在本地文本文件里，每次更新前备份、更新后重贴
- 更稳妥的做法：新建一个子主题，把 CSS 写进子主题的
style.css里（路径通常是/wp-content/themes/spacious-child/style.css），这样完全不受父主题更新影响 - 别用插件“一键保存 CSS”——多数这类插件只是把 CSS 存进数据库，照样会在主题切换或某些缓存清理时丢失
响应式下图片对齐错乱，比如手机端居中失效
Spacious 的移动端断点（@media screen and (max-width: 768px)）里，部分 CSS 会重置 float 或强制 width: 100%，导致你写的 margin: 0 auto 失效。
检查方法：用浏览器开发者工具（F12）切到手机视图，看图片元素是否还带着 aligncenter 类，再看计算后的 margin-left 和 margin-right 是不是被覆盖成了 0。
修复建议：
- 在额外 CSS 里追加媒体查询：
@media screen and (max-width: 768px) { .entry-content img.aligncenter { margin-left: auto !important; margin-right: auto !important; } } - 避免用
float做对齐，尤其在响应式场景；优先用display: block + margin或现代方案如text-align: center包一层<div> <p>真正麻烦的是嵌套在短代码或 Gutenberg 图片区块里的图片——它们生成的 HTML 结构更复杂，class 名可能带哈希，这时候光靠 CSS 类名定位就不够稳，得结合属性选择器或直接改区块设置。</p> </div>
