CSS布局中的文字对齐技巧_text-align vertical-align应用

在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 的元素内部对齐

常用取值有：

360智图

AI驱动的图片版权查询平台

143

查看详情

• 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 的区别与适用场景，能让你在处理文字布局时更加得心应手。不复杂但容易忽略细节。