vertical-align

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

CSS 中的 vertical-align 属性控制着同一行上相邻元素的对齐方式。

img {
  vertical-align: middle;
}

要使此功能生效,元素需要沿着基线设置。 例如,inline(例如 <span><img>)或 inline-block(例如由 display 属性设置)元素。

有效值包括

  • baseline – 这是默认值。
  • top – 将元素及其子元素的顶部与整行的顶部对齐。
  • bottom – 将元素及其子元素的底部与整行的底部对齐。
  • middle – 将元素的中间与父元素中所有小写字母的中间对齐。
  • text-top – 将元素的顶部与父元素字体的顶部对齐。
  • text-bottom – 将元素的底部与父元素字体的底部对齐。
  • sub – 将元素的基线与父元素的下标基线对齐。 就像 <sub> 的位置一样。
  • super – 将元素的基线与父元素的上标基线对齐。 就像 <sup> 的位置一样。
  • length – 将元素的基线对齐到其父元素基线上方的指定长度位置。(例如 px、%、em、rem 等)

您可以 在此查看每个值的示例

Check out this Pen!

一个常见的用例是将头像与用户名对齐。 要使它们沿一行居中,您需要使用 vertical-align: middle;。 但是请注意,它会根据文本最高的升部和最深的降部进行居中。

每个元素会根据您设置的行进行对齐,该行不会因元素而异。 因此,您可以混合搭配每个元素所使用的值,元素不会相互影响。

请注意,vertical-align 也适用于表格单元格元素,用来对齐它们内部的内容。 不过,最好坚持使用 top、middle 和 bottom 这些值,因为其他值在不同浏览器中结果不一致。

更多信息

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
所有 所有 所有 4+ 4+ 所有 所有
在旧版和新版浏览器中都相当一致,假设字体相同。

请注意,一些替换元素(例如 <textarea>)是内联的,但它们的基线没有指定,因此行为可能因浏览器而异。