图片在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。
- 浏览器开发者工具里看
img最终生效的样式，如果display: block被划掉，说明被别的CSS干掉了 - 临时加
!important验证（仅调试）：.precise-img img { display: block !important; } - 长期方案：把自定义CSS放到Oxygen的“Theme Styles”里，它的加载顺序靠后，天然权重更高
像素级对齐真正的麻烦点不在拖拽操作，而在Oxygen层层包裹的DOM结构和它生成的CSS优先级链条——你得先看清哪层样式在起效，再决定在哪一层动手。
立即学习“前端免费学习笔记（深入）”；
