Anima不生成align/float/text-align类CSS，图片对齐需在Figma中设置Constraints而非手动拖动；导出后应删HTML的width/height属性并用高优先级CSS微调。
HTML图片对齐代码怎么写才不被Anima插件覆盖
anima 会把 figma 中的图层位置、尺寸、约束直接转成 position + top/left 或 transform，它**不生成传统 align、float 或 text-align 类 css**。想靠手写 margin: auto 或 display: flex 居中？anima 下次同步设计稿时大概率直接抹掉。
Anima 导出后图片位置偏移的常见原因
不是代码写错了，是 Anima 的映射逻辑和你预期不一致：
- Anima 默认把图层的「中心锚点」对齐到父容器中心（用
transform: translate(-50%, -50%)），但父容器若没设position: relative，就会相对整个页面定位 - 图片在 Figma 里用了「Auto Layout」或「Constraints」，Anima 会转成
flex布局，但如果你手动加了float: left，两者冲突导致错位 - Figma 图层名含空格或中文（比如
用户头像 2x），Anima 生成的 class 名可能变成user-tou-xiang-2x，你写的 CSS 选择器对不上
怎么让 Anima 生成的图片对齐符合实际需求
关键不是后期改 HTML/CSS，而是提前控制 Figma 端的输出行为：
- 在 Figma 中，给图片图层设置明确的 Constraints：比如「左上固定、右下拉伸」对应
width: 100%; height: auto；「水平居中 + 固定宽高」才会触发 Anima 输出transform: translateX(-50%)+left: 50% - 避免用「Align」菜单手动拖动图片居中——Anima 不识别这种操作，只会按原始坐标导出绝对定位值
- 如果必须手写对齐逻辑，在 Anima 导出后，把自定义样式写在单独 CSS 文件里，并用更高优先级选择器，例如：
.anima-img-wrapper > img { margin: 0 auto; display: block; }而不是直接改 Anima 生成的内联 style
用 Anima + 手动微调时最易忽略的一点
Anima 生成的图片标签默认带 width 和 height 属性（来自 Figma 导入时的尺寸），但这些是 HTML 属性，不是 CSS。如果你用 CSS 设置了 max-width: 100%，而 HTML 属性还在，可能导致响应式失效或拉伸变形。每次导出后，记得检查并删掉不需要的 width 和 height 属性，或者用 JS 清理：
document.querySelectorAll('img').forEach(img => { img.removeAttribute('width'); img.removeAttribute('height'); }); 
