图片在Oxygen Builder中对不齐的根本原因是.ct-image容器的display: inline-block与vertical-align: baseline导致底部空白，解决方法是给img设display: block、用Flex容器包裹并设置justify-content和align-items为center，同时注意CSS优先级冲突。

图片在Oxygen Builder里对不齐，根本原因是CSS定位被覆盖

默认拖拽插入的image组件会套一层.ct-image容器，它自带display: inline-block和隐式vertical-align: baseline，导致图片底部总多出几像素空白——这不是你没对齐，是浏览器在“帮忙”加间隙。

• 检查元素时看到图片下方有看不见的空白？八成是vertical-align惹的祸
• 用Oxygen的“Margin”面板调数值没用？因为外边距作用在容器上，而错位来自行内布局逻辑
• 直接给img加display: block最干脆，一劳永逸干掉基线对齐干扰

Oxygen中让图片像素级居中：别碰“对齐”按钮，改CSS类

Oxygen右侧面板里的“Align”下拉菜单只控制父容器的text-align或justify-content，对单张图片的垂直/水平偏移毫无作用。真要像素级控制，必须进Custom CSS或Inline Styles。

• 选中图片 → 右侧“Advanced” → “Custom CSS Classes”填一个自定义类名，比如precise-img
• 在Oxygen全局CSS（或当前模板的CSS）里写：

  .precise-img img { display: block; margin: 0 auto; }

• 需要微调上下位置？用transform: translateY(-2px)比改margin-top更精准，不触发重排

用Flex容器包裹图片才能真正控住对齐行为

单独调一张图的样式容易被嵌套结构吃掉；把图片放进Oxygen的Inner Content或Div容器，再设该容器为Flex，才是稳定解法。

• 拖一个Div进来 → 编辑它的“Layout” → 把Display设为Flex
• 把图片拖进这个Div → 在Div的Layout里设Justify Content和Align Items均为Center
• 注意：如果Div没设固定宽高，它会缩成图片大小，此时center无效——得给Div加min-height或明确height

导出后图片偏移？检查Oxygen生成的class优先级是否被主题CSS覆盖

Oxygen输出的class名像ct-section-123带哈希，本意是防冲突，但某些主题的通用选择器（如img { max-width: 100% }）权重更高，会偷偷改掉你的display或transform。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 浏览器开发者工具里看img最终生效的样式，如果display: block被划掉，说明被别的CSS干掉了
• 临时加!important验证（仅调试）：

  .precise-img img { display: block !important; }

• 长期方案：把自定义CSS放到Oxygen的“Theme Styles”里，它的加载顺序靠后，天然权重更高

像素级对齐真正的麻烦点不在拖拽操作，而在Oxygen层层包裹的DOM结构和它生成的CSS优先级链条——你得先看清哪层样式在起效，再决定在哪一层动手。

立即学习“前端免费学习笔记（深入）”；