没有“最佳”对齐方案，只有最合适方案：text-align仅作用于行内内容；块级元素右对齐应选Flex的justify-content或margin-left:auto、Grid的justify-self；vertical-align仅适用于行内和表格上下文。
没有“最佳”的对齐方案，只有“最合适”的方案——取决于你要对齐的是什么元素、在什么上下文、要兼容哪些环境。
text-align: right 对块级容器内的行内内容有效，但对块级子元素无效
很多人误以为给一个 div 设置 text-align: right 就能让里面的 button 或 img 也右对齐。其实它只影响“行内流”中的内容：文本、span、img（作为替换元素默认 inline）、input 等。而 div、section 这类块级子元素不会被 text-align 推动。
- ✅ 正确用法：
text-align: right用于父容器，控制其内部文本和行内元素的水平位置 - ❌ 错误假设：
text-align: right可以让子div整体右移（实际需用margin-left: auto或 Flex/Grid） - ⚠️ 注意：
img在行内上下文中受text-align影响，但若设了display: block，就脱离行内流，不再响应
Flexbox 的 justify-content 和 margin-left: auto 是最可控的单轴右对齐手段
当目标是让一个或多个块级元素在容器中右对齐（比如导航栏按钮、搜索框右侧按钮），Flexbox 提供两种简洁路径：
- 对整个容器设
display: flex+justify-content: flex-end：所有直接子项整体靠右 - 对单个子项设
margin-left: auto：它会“吃掉”左侧所有剩余空间，自然贴右（无需改父容器 display） - ⚠️ 常见坑：
justify-content只作用于 flex 容器的直接子项；嵌套 flex 容器不会继承该行为 - ⚠️ 兼容性：IE10+ 支持 flex，但 IE10/11 对
flex-wrap、gap等支持不全，margin-left: auto在 flex 中更稳
Grid 的 justify-self 和 justify-content 更适合精确控制单个网格项
当你已用 display: grid 构建结构（如表单、仪表盘卡片布局），想单独调整某一项的位置，justify-self: end 比包裹一层 flex 更轻量。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- ✅
justify-self: end直接作用于网格项，强制其在所在单元格内右对齐 - ✅
justify-content: end作用于整个网格容器，让所有项集体右对齐（类似 flex 的justify-content） - ⚠️ 注意：
justify-self在 Firefox 和 Chrome 中表现一致，但在 Safari 15.4 之前对justify-self在隐式网格中的支持有 bug - ⚠️ 不要混用：
justify-self和margin-left: auto同时存在时，margin会被忽略
vertical-align 仅适用于行内/表格单元格上下文，别乱用在 flex 或 grid 里
vertical-align 经常被误认为是“通用垂直对齐属性”，但它只在两个场景生效：行内格式化上下文（inline-level box）和表格单元格（td / th）。在 flex 或 grid 容器中设置它完全无效。
- ✅ 行内场景：
img和span并排时，用vertical-align: middle对齐基线 - ✅ 表格场景：
td { vertical-align: middle }是表格内容垂直居中的标准写法 - ❌ 错误尝试：给 flex 子项加
vertical-align: center—— 浏览器会静默忽略 - ⚠️ 关键区别：
align-items（flex/grid）管交叉轴对齐，vertical-align管行内盒的基线对齐，二者作用域完全不同
真正容易被忽略的点是：对齐从来不是孤立操作。它依赖于父容器的格式化上下文（block/flex/grid/inline/table），而很多对齐失败，本质是没意识到当前元素处于哪种上下文。先确认 display 值，再选对齐属性，比反复试错高效得多。
