CSS | vertical-align 属性

vertical-align 属性用于设置行内元素（如 img、input 等）或表格单元格元素（如 td、th 等）在垂直方向上的对齐方式。

可选值

vertical-align 属性有以下几个可选值：

• baseline：默认值。元素放置在父元素的基线上。
• sub：垂直对齐文本的下标。一般用于在含有上下标的公式中，下标较深的部分。
• super：垂直对齐文本的上标。一般用于在含有上下标的公式中，上标较高的部分。
• text-top：元素的顶端与父元素的 font-size 的顶端对齐。一般用于将文本与图片等混排时，使文本与图片的顶端对齐。
• text-bottom：元素的底端与父元素的 font-size 的底端对齐。一般用于将文本与图片等混排时，使文本与图片的底端对齐。
• middle：元素垂直居中。一般用于混排时，使元素垂直居中。
• top：元素的顶端与父元素的顶端对齐。
• bottom：元素的底端与父元素的底端对齐。
• 长度值：例如，10px。元素相对于父元素垂直移动指定的像素值。一般用于表格单元格中，调整某一单元格中的元素位置。

注意事项

• vertical-align 属性只对行内或表格单元格元素有效。

• 如果父元素 line-height 的取值比 font-size 小，则可以通过设置 vertical-align: middle 实现元素的垂直居中。

• 在使用 vertical-align 属性时，文字内容会受到影响。部分浏览器的对齐方式可能会导致文字出现偏移，因此在使用 vertical-align 属性时，需要注意设置文本的情况。

• 在使用 vertical-align 时，需要注意的是，vertical-align 适用于单行文本，如果是多行文本，则需要通过其他方式来实现文本的垂直居中。

代码示例

.container {
  height: 300px;
  line-height: 300px;
  text-align: center;
  background-color: #f1f1f1;
}

.container img {
  vertical-align: middle;
}

如上述代码所示，可以通过设置 line-height 属性的值与父元素高度相同，并将父元素文本对齐方式设置为垂直居中，然后使用 vertical-align: middle 来实现图片垂直居中。