align属性在HTML5中已全面废弃，必须用CSS控制对齐：text-align仅作用于块级容器内的行内内容，块级子元素需用margin:0 auto或flex布局；vertical-align只对inline、inline-block、table-cell元素有效；Flexbox中需配合justify-content与align-items成对使用。
align 属性在 HTML5 中已全面废弃，直接写 align="center" 这类用法不会生效，且会触发 HTML 验证警告。现代对齐必须通过 CSS 控制。
text-align 只作用于块级容器内的行内内容
很多人误以为给 初学者常混淆主轴（main axis）和交叉轴（cross axis）。默认 表单标签（ 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 真正麻烦的不是“怎么对齐”，而是“为什么这里没对齐”。绝大多数对齐失败，根源不在属性写错，而在盒模型状态没理清：display 类型、是否脱离流、基线位置、父容器尺寸是否受控。调试时优先检查 computed styles 中的 display、line-height、height 和 flex 相关字段，比反复试 text-align: center 就能让里面所有子元素（比如另一个 、（默认 inline-block，但基线对齐仍受 text-align 间接影响）。
margin: 0 auto（需设宽度）或 display: flex
text-align: justify 对单行文本无效，需多行且容器有明确宽度才能看到两端对齐效果text-align: justify，浏览器对汉字间距拉伸不自然，易产生难看的字距空隙vertical-align 不是给父容器用的，只对特定 display 类型生效
vertical-align 常被误用于 display: inline、inline-block、table-cell 元素起作用。典型踩坑场景：给图片加 vertical-align: middle 后文字还是没对齐，往往是因为父 line-height 或字体大小不一致导致基线漂移。
vertical-align 无参照系vertical-align: top，但 内嵌了 display: block 的 align-items: flex-start 配合 display: flex
vertical-align: baseline 是默认值，但不同字体的 baseline 高度差异大，混用思源黑体和等宽字体时容易错位Flexbox 对齐参数必须成对理解：justify-content vs align-items
flex-direction: row 时，justify-content 控制水平，align-items 控制垂直；一旦改成 column，二者作用方向就互换。
justify-content: center 不会让子元素垂直居中 —— 必须配 align-items: center 才行align-items: center 看不出效果，需显式设 min-height: 100vh 或其他高度约束align-self 可覆盖单个子项的 align-items，但仅在父容器为 flex 时有效；对 grid 容器要用 justify-self/align-self
表单元素对齐最易出问题的三个点
）、输入框（）、下拉框（）因默认 display 和基线不一致，直接并排写 HTML 几乎必然错位。
display: flex 包裹每组 ，再设 align-items: center，比调 vertical-align 更可靠 默认 vertical-align: top，但 是 baseline，混排时务必重置为相同值float 做表单布局 —— 它会脱离文档流，导致后续元素塌陷，且与现代对齐方案（flex/grid）冲突text-align 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
