CSS标准：vertical-align属性

vertical-align 属性用于设置元素的垂直对齐方式。本文将详细讲解 vertical-align 属性的使用方法、取值范围、注意事项和示例说明。

1. 使用方法

vertical-align 属性可以应用于行内元素和表格单元格等元素。使用方法如下：

selector {
  vertical-align: value;
}

其中，selector 表示要设置垂直对齐方式的元素，value 表示垂直对齐方式的取值。

2. 取值范围

vertical-align 属性的取值范围如下：

• baseline：默认值，元素的基线与父元素的基线对齐；
• top：元素的顶部与父元素的顶部对齐；
• middle：元素的中部与父元素的中部对齐；
• bottom：元素的底部与父元素的底部对齐；
• text-top：元素的顶部与父元素的文本顶部对齐；
• text-bottom：元素的底部与父元素的文本底部对齐；
• sub：元素作为下标出现；
• super：元素作为上标出现；
• length：使用长度值来设置垂直偏移量；
• percentage：使用百分比值来设置垂直偏移量。

3. 注意事项

在使用 vertical-align 属性时，需要注意以下几点：

• vertical-align 属性只对行内元素和表格单元格等元素有效；
• vertical-align 属性的默认值是 baseline；
• vertical-align 属性的取值范围比较广，需要根据实际情况选择合适的取值；
• 在使用 length 或 percentage 取值时，需要注意元素的 line-height 属性值，以确保垂直对齐效果正确。

4. 示例说明

下面是两个示例说明，分别是使用 vertical-align 属性实现垂直对齐的示例。

示例一：使用 vertical-align 属性实现垂直居中

<div class="box">
  <p>文本内容</p>
</div>

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  display: table-cell;
  vertical-align: middle;
}

.box p {
  margin: 0;
}

上述代码中，使用 vertical-align 属性将 .box 元素垂直居中。

示例二：使用 vertical-align 属性实现文本与图标垂直对齐

<div class="box">
  <i class="icon"></i>
  <span>文本内容</span>
</div>

.box {
  display: inline-block;
  vertical-align: middle;
}

.box .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #f00;
  vertical-align: middle;
}

.box span {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

上述代码中，使用 vertical-align 属性将 .icon 元素与文本垂直对齐。需要注意的是，.icon 元素也需要设置 vertical-align 属性为 middle，以确保垂直对齐效果正确。