css vertical-align如何垂直对齐inline元素_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-05

浏览次数：次

vertical-align用于控制inline或inline-block元素的垂直对齐，常见取值有baseline、top、middle等，适用于图片与文本对齐、表单布局等场景，需注意其仅对行内元素有效且受line-height影响。

css vertical-align如何垂直对齐inline元素

在CSS中，vertical-align 属性用于控制 inline、inline-block 或表格单元格内容的垂直对齐方式。它常用于让行内元素（如图片、表单控件、文本）在一行中上下对齐。

注意：vertical-align 只对 inline、inline-block 和 table-cell 元素有效，不能用来垂直居中块级容器中的内容。

常见使用场景包括：

以下是 vertical-align 常用的关键字值及其效果：

假设你想让一张图片和一段文字垂直居中对齐：

@@##@@
<span style="font-size: 16px;">文字内容</span>

使用 vertical-align: middle 后，图片会和文字的中部大致对齐，视觉上更协调。

UXbot

AI产品设计工具

185 查看详情 UXbot

又比如多个 inline-block 元素希望顶部对齐：

.box {
  display: inline-block;
  vertical-align: top;
}

这样即使盒子高度不同，它们也会从顶部开始对齐，避免默认 baseline 对齐导致的错位。

很多人误以为 vertical-align 能像 flex 或 grid 那样垂直居中整个容器，但实际上它影响的是元素在当前行内的对齐位置。

关键点：

基本上就这些，掌握好取值和适用场景，就能准确控制行内元素的垂直位置。

以上就是css vertical-align如何垂直对齐inline元素的详细内容，更多请关注其它相关文章！