标题与正文左右不对齐需先定位父级布局干扰，再启用CSS基线对齐模式强制统一文字基线，辅以容器内边距微调或全角空格校准，最后通过开发者工具验证line-height、vertical-align和padding-left一致。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在码上飞AI生成的应用界面中，标题与正文左右不对齐是高频问题，尤其当用户自定义了中文标题、添加了图标或启用了多语言字段后，系统默认渲染会因字体宽度、内边距计算偏差导致视觉错位，直接影响交付验收。
确认对齐失效的根源位置
进入码上飞平台→登录账号→点击“我的应用”→找到目标应用→点击右侧“编辑”按钮→在左侧导航栏选择【页面结构】→展开对应页面节点→点击该页面下的“标题组件”或“文本组件”。
此时右侧属性面板中若显示“对齐方式：居中”但预览仍偏左，说明问题不在样式设置本身，而是组件容器的父级布局存在隐式padding或flex-direction干扰——这一步必须先定位，否则后续所有调整都是徒劳。
强制统一文字基线对齐（推荐）
选中标题组件→右侧属性面板切换至【高级设置】→找到“文字渲染模式”选项→下拉选择【CSS基线对齐】。
该模式会绕过浏览器默认的font-metrics计算，强制以汉字字框底部为基准线对齐所有行内元素。若未启用此模式，中英文混排时英文字母下降部（如g、y）会拖低整行视觉重心，造成标题“看起来比正文高半截”的错觉。
启用后立即点击右上角“实时预览”，观察标题与正文首行文字底部是否处于同一水平线。
方法一：通过容器内边距微调
选中标题组件的直接父容器（通常是“页面主体”或“卡片”组件）→右侧属性面板→【样式】→【内边距】→将“左”和“右”数值设为完全相同（例如都设为16px）。
注意：若父容器已设为flex布局且justify-content为space-between，则此操作无效，需先改回flex-start。
方法二：用空格字符手动校准（应急）
双击标题组件进入编辑状态→在标题文字最前方插入一个全角空格（ ），预览查看是否右移；若仍偏左，再加一个；最多不超过两个全角空格。
⚠️此法仅限测试阶段临时使用，导出源码后空格可能被压缩丢失，正式交付前必须切回CSS基线对齐模式。
验证最终效果
点击顶部“预览”按钮→在新窗口中按Ctrl+Shift+I打开开发者工具→切换到“Elements”标签→用鼠标悬停检查标题与正文两个DOM节点的computed样式中“line-height”“vertical-align”“padding-left”三项数值是否一致。
一致即完成对齐调整。
