vertical-align 是 CSS 中用于垂直对齐内联元素的属性。这个属性可以应用于行内元素或表格单元格，并控制元素在行高内的垂直对齐方式。

语法如下：
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit;

常见的取值包括：

  •  baseline：默认值，元素的基线与父元素的基线对齐。

  •  sub：元素垂直对齐到父元素的下标基线。

  •  super：元素垂直对齐到父元素的上标基线。

  •  top：元素的顶部与父元素的顶部对齐。

  •  text-top：元素的顶部与父元素的字体顶部对齐。

  •  middle：元素垂直居中对齐。

  •  bottom：元素的底部与父元素的底部对齐。

  •  text-bottom：元素的底部与父元素的字体底部对齐。

  •  <length>：使用具体的长度值进行垂直对齐。

  •  <percentage>：使用百分比值进行垂直对齐。

  •  inherit：继承父元素的 vertical-align 值。


下面是一个简单的例子，演示了如何使用 vertical-align：
img {
  vertical-align: middle; /* 图片垂直居中对齐 */
}

sup {
  vertical-align: super; /* 上标垂直对齐 */
}

sub {
  vertical-align: sub; /* 下标垂直对齐 */
}

在这个例子中，img 元素的文本内容垂直居中对齐，sup 元素的文本内容上标对齐，sub 元素的文本内容下标对齐。


转载请注明出处：http://www.zyzy.cn/article/detail/4270/CSS