什么是垂直对齐？

CSS 有一个名为 vertical-align 的属性。 当您第一次学习它时，它可能有点令人困惑，所以我认为我们可以帮助解释它是什么以及一些用例。

基本用法如下

img { 
  vertical-align: middle;
}

请注意，在此用法示例中，它应用于 img 元素。 图像天生就是内联元素，这意味着如果可以，它们将与文本直接内联。 但“内联”到底意味着什么？ 这就是 vertical-align 的作用所在。

有效值为：baseline、sub、super、top、text-top、middle、bottom、text-bottom、length 或 百分比值。

在我看来，混乱之处在于当人们尝试在块级元素上使用 vertical-align 并得不到任何结果时。 如果你在一个更大的 div 内部有一个小的 div，并且想要垂直居中较小的 div，vertical-align 不会帮助你。

基线

vertical-align 的默认值（如果您不声明任何内容）是 baseline。 图像将与文本在文本基线处对齐。 请注意，字母的下行字母会向下延伸到基线以下。 图像不会与下行字母的最低点对齐，那不是基线。

中间

也许 vertical-align 最常见的用法是在图标大小的图像上将其设置为“middle”。 结果通常在跨浏览器之间是一致的

浏览器尽其所能将文本的像素高度与图像的像素高度居中

请注意，如果图像大于当前字体大小和行高，它将根据需要将以下行向下推

文本底部

与文本的基线不同，文本底部是下行字母向下延伸的地方。 图像也可以与这种深度对齐

文本顶部

与 text-bottom 相反，text-top 是当前字体大小的最高点。 您也可以与此对齐。 请注意，当前字体 Georgia 可能有一些升部字母高于此处显示的字母，因此存在一个小间隙。

顶部和底部

顶部和底部的工作方式类似于 text-top 和 text-bottom，但它们不受文本的限制，而是受到该行上任何内容（如另一个图像）的限制。 因此，如果同一行上存在两个高度不同的图像，并且都大于该行的文本，则无论该文本大小如何，它们的顶部（或底部）都会对齐。

上标和下标

这些值代表上标和下标，因此使用这些方法对齐的元素会相应地对齐自身

表格单元格的垂直对齐

与图像不同，表格单元格默认情况下垂直对齐到中间

如果您希望看到文本在需要扩展到其所需高度之外时对齐到单元格的顶部或底部，请应用顶部或底部垂直对齐

在表格单元格上使用 vertical-align 时，最好坚持使用顶部、底部和中间。 其他值都没有多大意义，而且跨浏览器的结果不可预测。 例如，将单元格设置为 text-bottom 会在 IE 6 中将文本对齐到底部，在 Safari 4 中对齐到顶部。 将其设置为 sub 会在 IE 6 中导致中间对齐，在 Safari 4 中导致顶部对齐。

vertical-align 和 inline-block

图像虽然从技术上讲是内联级元素，但行为更像内联块元素。 您可以设置它们的宽度和高度，它们会遵守，这与大多数内联元素不同。

内联块元素的行为与 vertical-align 中的图像相同，因此请参考上述内容。 但是，请注意，并非所有浏览器都以相同的方式处理内联块元素，因此 vertical-align 可能是您最不担心的问题。 不过，那是另一个故事……。

已弃用为属性

有时您会看到“valign”用于表格单元格以实现垂直对齐。 例如 <td valign=top>。 应该注意的是，此属性已弃用，不应使用。 无论如何，没有理由使用它，因为您可以使用 CSS 来完成它。

更多信息

• vertical-align 在年鉴中
• vertical-align 在 MDN 上
• Christopher Aue：关于 Vertical-Align 的所有知识
• 关于它的技巧 用于在未知高度的父级中居中元素