使用Flex布局结合属性选择器可实现多列文字对齐，通过data-align属性或:nth-child()定位控制左右对齐，配合flex分布空间，或用table布局确保等高行，关键在于选择合适的布局模型与CSS选择器精准设置。
多列文字对齐在网页排版中很常见，比如表单标签、价格列表或数据项展示。通过 CSS 选择器结合合适的布局方式，可以精确控制对齐效果。核心思路是利用结构化 HTML 和针对性的 CSS 选择器来统一或差异化设置文本对齐方式。
使用 flex 布局配合属性选择器
Flex 布局是最常用且灵活的方式，结合属性选择器能实现不同列的对齐策略。
假设 HTML 结构如下：
<div class="row"><span class="col label" data-align="left">姓名</span>
<span class="col value" data-align="right">张三</span>
</div>
可通过属性选择器分别设置对齐：
立即学习“前端免费学习笔记（深入）”；
.row {display: flex;
justify-content: space-between;
width: 100%;
}
[data-align="left"] {
text-align: left;
text-align: start;
}
[data-align="right"] {
text-align: right;
text-align: end;
}
这样每列内容会根据 data-align 属性自动对齐，适合动态内容或模板渲染场景。
利用 nth-child 选择器控制列样式
当多列结构规律时，可用 :nth-child() 精准定位某一列进行对齐设置。
例如三列布局：
<div class="item"><span>项目名称</span>
<span>数量</span>
<span>￥200</span>
</div>
CSS 设置第二列居中、第三列右对齐：
.item {display: flex;
}
.item span:nth-child(2) {
text-align: center;
flex: 1;
}
.item span:nth-child(3) {
text-align: right;
flex: 1;
}
注意：需确保父容器为 flex 或 grid 才能正确分布空间。
表格布局中的对齐控制
若使用 display: table 模拟表格，可通过类名或位置选择器统一设置列对齐。
.table { display: table; width: 100%; }.row { display: table-row; }
.cell { display: table-cell; padding: 8px; }
.cell:nth-child(1) { text-align: left; }
.cell:nth-child(2) { text-align: center; }
.cell:nth-child(3) { text-align: right; }
这种方式兼容性好，适合需要等高行的场景。
基本上就这些。关键是选对布局模型（flex/grid/table），再用 CSS 选择器精准命中目标列。结构清晰的前提下，对齐控制就很自然。
