text-align 用于块级元素内行内容的水平对齐，如文字居中；vertical-align 用于行内元素或表格单元格的垂直对齐，如图文对齐。两者作用对象不同，不可混淆。
text-align 和 vertical-align 是 CSS 中常被混淆的两个属性，它们都涉及“对齐”，但作用对象和使用场景完全不同。下面分别说明它们的用途、取值和常见用法。
text-align：控制文本的水平对齐方式
text-align 用于设置**块级元素内行内内容的水平对齐方式**，比如文字、图片等在容器中的左右或居中排列。
它适用于块级元素（如 div、p、h1~h6），不能用于控制单个行内元素自身的位置。
常用取值包括：
立即学习“前端免费学习笔记（深入）”；
- left：左对齐（默认）
- center：居中对齐
- right：右对齐
- justify：两端对齐（使每行文字宽度一致，常用于段落排版）
示例：
div {
text-align: center;
}
这个设置会让 div 里的文字、图片等内容在 div 内部水平居中显示。
vertical-align：控制行内或表格单元格内容的垂直对齐
vertical-align 用于设置**行内元素或表格单元格内容在垂直方向上的对齐方式**。它最常用于：
- 图片与文字的对齐（如 img 与 span 并排时）
- 表格单元格（td/th）中内容的上下对齐
- 使用 display: table-cell 的元素
注意：vertical-align 对块级元素无效，也不能用来垂直居中一个块级盒子本身（比如让一个 div 在页面中间竖直居中）。
常见取值有：
- baseline：基线对齐（默认）
- top：顶部对齐
- middle：居中对齐
- bottom：底部对齐
- text-top / text-bottom：相对于文字的顶部/底部
- sub / super：下标/上标（类似 math 效果）
示例：
img {
vertical-align: middle;
}
这能让图片和旁边的文本在垂直方向上居中对齐，避免出现图文错位的情况。
常见误区与使用建议
很多人误以为 vertical-align 可以让一个 div 垂直居中于父容器，这是错误的理解。要实现块级元素的垂直居中，应使用 flexbox、grid 或 line-height（单行文本）等方法。
关键点总结：
- text-align 控制**水平对齐**，作用于**块级容器内的行内容器**
- vertical-align 控制**垂直对齐**，只对**行内元素、表格单元格**有效
- 两者都不能直接“居中”一个块级盒子本身
- 图文混排时，vertical-align 很实用；排版段落时，text-align 更常用
