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 这些值,因为其他值在不同浏览器中结果不一致。

更多信息
- 什么是 vertical-align?
- 此属性不能让您在一个元素内“垂直居中”另一个元素。 Flexbox 是更合适的工具。 但是,有一个技巧 使用伪“幽灵”元素可以实现这种效果。
- MDN
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
所有 | 所有 | 所有 | 4+ | 4+ | 所有 | 所有 |

请注意,一些替换元素(例如 <textarea>
)是内联的,但它们的基线没有指定,因此行为可能因浏览器而异。
嘿,伙计们,看看 Chris 关于垂直对齐的文章:https://css-tricks.org.cn/what-is-vertical-align
N
谢谢,您的讲座非常棒..
很好的解释。谢谢。
谢谢,很有帮助
感谢您精彩的文章 :)
为什么属性名称是 vertical-align,而一些属性值以 text 开头(text-top,text-bottom)?
真是个命名约定 :(
在演示中的 css 规则中,类选择器后面的 > * 是什么原因?
星号黑客用于定位下一级的所有子元素
“为了使此方法起作用,元素需要单独设置一个基线。” 这是什么意思?
即使有示例,对于学习 CSS 的人来说,这句话也不通。问题不在于基线是什么意思,而是句子的语法导致了混乱。
你能解释一下吗?
alone 应该是 along
我相当确定您只是打错了字,但它说需要设置“沿着”基线。这意味着您要垂直对齐的元素需要一个可以与其以某种方式对齐的周围元素。例如,如果您在
<p>
元素(段落元素)中有一个内联<img>
元素(图像元素),那么段落的文本将被视为您可以垂直对齐图像的基线。您不能简单地将图像粘贴到<div>
元素中,然后尝试使用 vertical-align 属性在该元素中移动图像。它不会有任何效果。现在,如果您这样做您使用文本“Hello World!”作为基线,围绕它对齐您的 img。我知道这是一个老问题,但希望这能帮助将来的人。
如何将容器固定到网页顶部,使其在网页向下滚动时不会消失(在 CSS 中)?
您可以执行类似的操作
或者,如果容器从页面中间开始,并且您希望它到达顶部时保持粘性,这里有一个示例(尽管您需要 JavaScript)
为什么如果不使用 > *(星号选择器)代码就不起作用?
Elementor 给出了以下警告:通用选择器(*)以速度慢而闻名。
非常感谢您对以上 2 个要点的一些见解。
我也有同样的疑问,然后在 Code Academy 找到了这个回复
https://www.codecademy.com/forum_questions/51f232fe631fe94cb9000f5d
从表面上看,这在过去很长一段时间,比如 15 到 20 年前,曾经是旧时代 Web 开发中的一个警告。因此,该警告在当今的一些编辑器中仍然存在,但实际上没有什么可担心的!
或者尝试
display: grid;
align-items: center;