Framer导出图片对齐失效，主因是未生成align-self等CSS属性，需开启“Include CSS in HTML”、在Layout面板设Center对齐、避免全局img样式覆盖，或手动加class补.align-self: center。
导出时图片对齐失效，是因为Framer没生成style或class对应CSS
Framer导出HTML默认用Flex布局，但只对容器加display: flex，子元素（比如<img>）不带align-self或margin等对齐控制，浏览器就按默认baseline或stretch渲染。你看到“居中”在编辑器里，导出后变左上角，基本是这个原因。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在Framer里选中图片 → 右侧「Layout」面板确认对齐方式设为
Center（不是靠拖动位置），否则导出不识别 - 导出前打开「Export Settings」→ 勾选
Include CSS in HTML（默认可能关着） - 如果用了
Stack组件包住图片，检查Stack的alignment设为center，否则导出后Stack的justify-content可能是flex-start
Framer导出的HTML里<img>没class，没法手动加CSS
默认导出不会给<img>打class，只靠内联style或父容器约束。一旦父容器Flex规则被覆盖（比如你加了全局img { display: block }），对齐立刻崩。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出后立刻搜
<img src=，看有没有style="align-self: center"——没有就说明Framer没导出对齐属性 - 手动在
<img>上加class="framer-img-center"，然后在<style>块里补：.framer-img-center { align-self: center; } - 更稳的做法：导出后把图片包一层
<div style="display: flex; justify-content: center; align-items: center">，直接绕过Framer的Flex链路
用exportCode() API自定义导出时保留对齐，但需改Framer JS逻辑
如果你用Framer的代码组件（Code Component），exportCode()默认不处理对齐元数据。它只导出结构和基础样式，alignItems这类来自Layout面板的设置不在导出字段里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在Code Component里用
useTransform或useMotionValue手动绑定对齐状态，再写进style对象 - 导出前用
console.log(frame.children)查图片节点的layoutAlign值（比如"center"），然后拼进style字符串 - 别依赖
exportCode()自动同步UI对齐——它只同步尺寸、位置、opacity，不包括Flex子项对齐语义
Include CSS in HTML开关，一关，所有对齐就只剩HTML结构，没样式兜底。 
