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