text-align 单独用于多列容器无效，因其仅控制块内行内内容对齐，不控制列间布局；必须配合 column-count 或 column-width 触发多列机制后，text-align 才作用于各列内部文本。
text-align 单独用在多列容器上为什么无效
text-align 本身只控制**行内内容在块级容器中的水平对齐方式**，它不负责列与列之间的布局。如果你把 text-align: justify 或 text-align: center 直接写在包裹多列的 <div> 上，而该容器没有设置多列（如 column-count），那它就只是普通块，对齐效果仅作用于每行文字首尾，和“列对齐”完全无关。
常见错误是这样写：
.multi-col {
text-align: justify;
/* 缺少 column-count / column-width */
}结果就是文字照常换行，但列数还是 1，根本没形成多列布局。
用 column-count + text-align 实现真·多列文本对齐
CSS 多列布局靠 column-count 或 column-width 触发，此时 text-align 才真正作用于每一列内部的文本行。这是唯一能用原生 text-align 控制多列中各行对齐的方式。
立即学习“前端免费学习笔记（深入）”；
-
text-align: justify会让每列内每行文字两端对齐（注意：最后一行默认左对齐，可用text-align-last: justify强制） -
text-align: center会让每列内所有行居中，包括最后一行 - 列之间间距由
column-gap控制，它不影响text-align行为 - 不要指望
text-align调整列与列之间的位置——那是column-fill或容器 display 类型的事
.multi-col {
column-count: 3;
column-gap: 2rem;
text-align: justify;
text-align-last: justify;
}Flex/Grid 布局下“多列文本对齐”的本质是分块，不是分栏
当用 display: flex 或 display: grid 把文本拆成多个 <p> 或 <div> 后，你面对的已不是 CSS 多列（columns），而是多个独立文本块。这时 text-align 依然有效，但它只作用于每个块内部，而非跨块对齐。
想让这些块里的文字“看起来对齐”，关键在统一块级样式：
- 所有子项必须有相同
width（或flex-basis/grid-template-columns） - 所有子项设置一致的
text-align和line-height - 避免子项内出现不同长度的单词或断行差异（比如一个含长 URL，一个全是短词）
- 若需“等高对齐”，Flex 要加
align-items: start，Grid 要加align-items: start或justify-items: start
.text-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.text-grid > * {
text-align: left;
margin: 0;
}justify-content 与 text-align 混用时的优先级陷阱
在 Flex/Grid 容器中，justify-content 控制的是**项目整体在主轴上的位置**，而 text-align 控制的是**项目内部文字的位置**。两者不冲突，但容易误判效果来源。
典型误区：
- 给 Flex 容器设
justify-content: center，以为能让文字居中——实际只是把整个<p>块居中了，块内文字仍靠左 - 给 Grid 项设
justify-self: center，但忘了子项是display: block，文字仍按自身text-align渲染 - 在
display: inline-flex容器里用text-align: center，对齐的是容器在父级中的位置，不是内部文字
记住：只要子项是块级元素，text-align 就只管它自己肚子里的文字；想动它的位置，得用 Flex/Grid 的对齐属性；想动它肚子里文字的位置，才轮到 text-align 出场。
多列文本对齐这件事，核心在于分清「列」是 CSS Columns 还是人为拆成的多个块——前者靠 column-count + text-align，后者靠统一子项尺寸 + 独立 text-align。很多人卡在第一步：没意识到自己根本没触发多列机制，就急着调 text-align。
