现代多元素对齐必须用CSS：text-align仅对块内行内内容水平对齐；flex通过justify-content: flex-end或margin-left: auto实现整体或单个子元素右对齐；grid适合列式布局，如表单label/input对齐。
直接用 HTML 标签本身无法可靠完成多元素对齐——<center> 已废弃，<div align="right"> 等属性在 HTML5 中无效，浏览器会忽略。所有现代对齐必须靠 CSS 实现。
text-align 只作用于块容器内的行内内容
这是最容易误解的一点：text-align 不是对“元素”对齐，而是对块级父容器里的文字、<img>（当为 display: inline 或 inline-block 时）、<span> 等行内内容水平对齐。
- 给
<p>或<div>加text-align: right，只让里面文字右对齐，不影响它自己在父容器中的位置 - 若子元素是
<div>（块级），text-align对它完全没作用——它仍独占一行、左贴边 - 想让多个
<div>并排右对齐？得换方案，比如flex或grid
用 flex 实现多子元素整体右对齐或单个右推
Flex 是目前最常用、最可控的方式，尤其适合导航栏、按钮组、表单项等场景。
- 父容器设
display: flex，再加justify-content: flex-end→ 所有子元素整体靠右排列 - 若只想让某一个子元素（如“删除”按钮）单独靠右，其他靠左，给它加
margin-left: auto即可，无需改父容器对齐方式 - 注意：子元素默认变成
flex-item，float、vertical-align、display: inline-block等会失效 - 旧版 Safari（iOS 9.3 及更早）需加
-webkit-justify-content: flex-end
用 grid 实现精确列对齐（比如表单 label/input）
当多个元素需严格按列分布（如左列标签、右列输入框），grid 比 flex 更直观、不易错位。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid，再用grid-template-columns: 120px 1fr明确划分两列 - 每个
<label>和紧随其后的<input>自动落入对应列，天然对齐 - 不用手动设
width或float，响应式时改一列宽度，整行自动适应 - IE11 支持
grid，但仅限旧语法（display: -ms-grid），如需兼容需额外处理
真正难的不是“怎么写”，而是分清目标：你要对齐的是文本内容？是多个块级元素的位置？还是它们之间的相对间距？混淆这三者，text-align 就会看起来“失灵”，margin: 0 auto 就会纹丝不动——因为它们根本就不是为那个目的设计的。
