text-align用于块级元素内行内内容的水平对齐，如left、center、justify；vertical-align用于行内或表格元素的垂直对齐，如middle、top，二者不可混用，常配合display: table-cell或line-height实现居中效果。
在CSS布局中，文字对齐是一个基础但关键的细节。正确使用 text-align 和 vertical-align 能有效提升页面的可读性和视觉美感。这两个属性虽然名字相似，但作用范围和使用场景完全不同，容易混淆。
text-align：控制水平对齐方式
text-align 用于设置**块级元素内行内内容的水平对齐方式**，常用于文本、图片等行内元素的对齐控制。
常用取值包括：- left：左对齐（默认）
- right：右对齐
- center：居中对齐
- justify：两端对齐，使文本左右边缘都对齐，适合段落排版
例如，让一个段落中的文字居中显示：
p {
text-align: center;
}注意：text-align 是继承属性，父元素设置后，子元素会自动继承，除非显式覆盖。
立即学习“前端免费学习笔记（深入）”；
vertical-align：控制垂直对齐方式
vertical-align 并不控制块级元素的垂直对齐，而是用于**行内元素或表格单元格内的垂直对齐**，常见于图片与文字对齐、表格内容对齐等场景。
典型应用场景包括：- 图片与文字在同一行时的对齐（如图标与按钮文字）
- 表格单元格（td）中内容的上下对齐
- 使用 display: table-cell 的元素内部对齐
常用取值有：
- baseline：基线对齐（默认）
- top：顶部对齐
- middle：居中对齐
- bottom：底部对齐
- text-top / text-bottom：相对于文字的顶部/底部对齐
例如，让图片与文字垂直居中对齐：
img {
vertical-align: middle;
}这个设置会让图片的中线与文字的中线对齐，视觉上更协调。
常见误区与注意事项
很多人误以为 vertical-align 可以让一个 div 在父容器中垂直居中，这是错误的。它只对行内元素或表格类元素生效。
- 对块级元素使用 vertical-align 不会产生效果
- 在使用 flex 或 grid 布局时，应使用 align-items 或 justify-content 实现垂直对齐
- 当 inline-block 元素之间出现空白间隙时，可通过设置 vertical-align: top 或调整父元素 font-size 来解决
结合使用技巧
在实际开发中，两者常配合使用。例如设计一个居中的按钮：
.btn {
text-align: center; /* 文字水平居中 */
line-height: 40px; /* 简单实现单行垂直居中 */
height: 40px;
display: table-cell;
vertical-align: middle; /* 内容垂直居中（配合 display: table-cell） */
}或者在表单项中，让标签与输入框对齐：
label, input {
vertical-align: middle;
}基本上就这些。掌握 text-align 和 vertical-align 的区别与适用场景，能让你在处理文字布局时更加得心应手。不复杂但容易忽略细节。
