text-align 用于控制行内内容在块级容器内的水平对齐，取值包括 left、right、center、justify；它不居中块元素本身，且继承性强，仅作用于文本、inline 和 inline-block 元素。
text-align 怎么让段落文字居中或右对齐
text-align 是控制**行内内容在块级容器内水平对齐**的核心属性，它只影响子元素中的文本、inline 元素和 inline-block 元素，对 block 子元素本身无效。
常见取值有：left、right、center、justify（两端对齐）。注意：justify 在短句或单行时效果不明显，且可能造成字间距异常拉伸。
- 对中文段落用
text-align: justify时，浏览器默认不会压缩汉字间空白，需配合text-justify: inter-ideograph（仅部分浏览器支持，如旧版 IE/Edge）或改用弹性布局模拟 - 想让整个
div居中显示？别只靠text-align: center—— 它只居中文本，不居中块本身；此时应优先考虑margin: 0 auto或display: flex -
text-align继承性强，通常设在父容器上即可，子元素无需重复声明（除非要覆盖）
vertical-align 为什么设了没反应
vertical-align **不是用来垂直居中块级元素的**，它只对 inline、inline-block、table-cell 元素生效，作用是调整这些元素在其所在“行框（line box）”内的基线位置。
典型误用场景：给一个 div 设 vertical-align: middle，完全无效，因为 div 默认是 block。
立即学习“前端免费学习笔记（深入）”；
- 想让图片和旁边文字垂直居中对齐？把图片设为
vertical-align: middle，同时确保文字容器也是inline级（如span）或同为inline-block - 在
table-cell中，vertical-align才真正等效于“单元格内垂直对齐”，这时top/middle/bottom表现符合直觉 - 现代替代方案：用
display: flex+align-items: center更可靠，尤其对未知高度内容
direction 和 writing-mode 如何切换排版方向
需要支持从右向左（RTL）语言（如阿拉伯语、希伯来语）或竖排中文时，direction 和 writing-mode 是关键属性。
direction: rtl 改变的是**行内内容的逻辑顺序和默认对齐方向**（例如 text-align: left 在 RTL 下实际靠右），但不改变文字朝向；而 writing-mode 控制文字流方向（横排/竖排）和块流向。
-
writing-mode: vertical-rl让文字竖排、从右到左堆叠（传统中文竖排）；vertical-lr则是竖排、从左到右堆叠（日文常见） - 竖排时
text-align的含义会变化：text-align: center变成“在竖直方向居中”（即左右居中），而水平方向对齐由text-orientation或glyph-orientation-vertical控制（后者已废弃） - RTL 页面建议在根元素（
html）设dir="rtl"，CSS 中用direction: rtl配合unicode-bidi: embed处理混合文本
flexbox 和 grid 中的对齐逻辑和 text-align 冲突吗
不冲突，但职责完全不同：text-align 在 flex 或 grid 容器里**依然只作用于其直接子元素中的文本内容**，而不是控制子项（items）的位置。
真正控制子项对齐的是 flex/grid 自己的对齐属性，比如 justify-content（主轴）、align-items（交叉轴）。
- 在一个
display: flex的容器里，即使设了text-align: center，也不会影响 flex items 的位置；但若 items 是文字或inline元素，它们内部的文本仍受该text-align影响 - 如果 flex item 是个
div且含多行文本，想让它内部文字居中，就得在 item 上单独设text-align: center，不能指望父容器的 flex 对齐“透传”过去 - 注意
align-items: center和text-align: center同时存在时，前者居中的是整个 item 块，后者居中的是 item 里的文字——两者可以并存，也常需要并存
