text-align 单独用于多列容器无效，因其仅控制块内行内内容对齐，不控制列间布局；必须配合 column-count 或 column-width 触发多列机制后，text-align 才作用于各列内部文本。
text-align 单独用在多列容器上为什么无效
常见错误是这样写： 结果就是文字照常换行，但列数还是 1，根本没形成多列布局。 CSS 多列布局靠 立即学习“前端免费学习笔记（深入）”； 当用 想让这些块里的文字“看起来对齐”，关键在统一块级样式： 在 Flex/Grid 容器中， 典型误区： 记住：只要子项是块级元素， 多列文本对齐这件事，核心在于分清「列」是 CSS Columns 还是人为拆成的多个块——前者靠 text-align 本身只控制**行内内容在块级容器中的水平对齐方式**，它不负责列与列之间的布局。如果你把 text-align: justify 或 text-align: center 直接写在包裹多列的 column-count），那它就只是普通块，对齐效果仅作用于每行文字首尾，和“列对齐”完全无关。.multi-col {
text-align: justify;
/* 缺少 column-count / column-width */
}用 column-count + text-align 实现真·多列文本对齐
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 把文本拆成多个 或 columns），而是多个独立文本块。这时 text-align 依然有效，但它只作用于每个块内部，而非跨块对齐。
width（或 flex-basis/grid-template-columns）text-align 和 line-height
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 混用时的优先级陷阱
justify-content 控制的是**项目整体在主轴上的位置**，而 text-align 控制的是**项目内部文字的位置**。两者不冲突，但容易误判效果来源。
justify-content: center，以为能让文字居中——实际只是把整个 块居中了，块内文字仍靠左justify-self: center，但忘了子项是 display: block，文字仍按自身 text-align 渲染display: inline-flex 容器里用 text-align: center，对齐的是容器在父级中的位置，不是内部文字text-align 就只管它自己肚子里的文字；想动它的位置，得用 Flex/Grid 的对齐属性；想动它肚子里文字的位置，才轮到 text-align 出场。column-count + text-align，后者靠统一子项尺寸 + 独立 text-align。很多人卡在第一步：没意识到自己根本没触发多列机制，就急着调 text-align。
