vertical-align详细介绍

1.定义:

vertical-align是一个CSS属性，用于指定行内元素或表格单元格中内容的垂直对齐方式。它可以应用于行内元素、表格单元格或表格单元格中的内容。

该属性可以接受多个值，包括关键字（如top、middle、bottom），长度单位（如像素、百分比）或百分比值的关键字（如baseline、sub、super）。下面是一些常见的vertical-align的取值：

1. baseline: 对齐元素的基线与父元素的基线对齐。
2. top: 把元素的顶端与行框的顶端对齐。
3. middle: 将元素的中心与父元素的中心对齐。
4. bottom: 把元素的底端与行框的底端对齐。
5. text-top: 把元素的顶端与父元素的文本顶端对齐。
6. text-bottom: 把元素的底端与父元素的文本底端对齐。
7. sub: 把元素垂直对齐到父元素的下标基线。
8. super: 把元素垂直对齐到父元素的上标基线。

属性值图解:

此外，vertical-align属性也可以接受长度单位（如像素）或百分比值。这些值用于指定元素相对于行框的偏移量。

需要注意的是，vertical-align属性只适用于行内元素和表格单元格的内容，对块级元素无效。如果要垂直对齐块级元素，可以使用其他技术，如Flexbox或Grid布局。

以下是一个示例，展示如何使用vertical-align属性：

span {
  vertical-align: middle;
}

td {
  vertical-align: top;
}

在上面的示例中，带有span标签的行内元素将垂直居中对齐，而表格单元格中的内容将顶部对齐。