CSS中如何实现图片与文字垂直居中，都有哪些方式?

在网页开发过程中，图文混排的场景非常普遍，其中图片和文字能够垂直居中对齐是提升页面美观度的关键需求。不同的布局场景适合不同的实现方式，下面介绍几种常用的CSS实现方案。

方法一：使用vertical-align属性

vertical-align属性主要用于设置行内元素或表格单元格元素的垂直对齐方式，对于同一行的图片和文字，设置该属性可以实现垂直居中。

需要注意的是，vertical-align只对行内元素、行内块元素以及表格单元格生效，并且元素的display属性需要符合要求。

/* 容器设置为行内块，方便控制内部元素 */
.img-text-box {
    display: inline-block;
}
/* 图片设置为行内块，设置垂直居中 */
.img-text-box img {
    vertical-align: middle;
}
/* 文字也设置为行内块，同样设置垂直居中 */
.img-text-box span {
    vertical-align: middle;
    margin-left: 8px; /* 可选，增加文字和图片的间距 */
}

对应的HTML结构如下：

<div class="img-text-box">
    <img src="icon.png" alt="图标" width="24" height="24" />
    <span>这是一段文字</span>
</div>

方法二：使用flex布局

flex布局是目前主流的布局方式，实现垂直居中的逻辑非常清晰，只需要设置容器为flex布局，然后设置交叉轴对齐方式为居中即可。

这种方式的兼容性较好，适合大多数现代浏览器场景，而且不需要关心内部元素是行内还是块级，适配性很强。

.flex-center {
    display: flex;
    align-items: center; /* 交叉轴（垂直方向）居中对齐 */
    gap: 8px; /* 可选，设置图片和文字的间距 */
}

对应的HTML结构如下：

<div class="flex-center">
    <img src="icon.png" alt="图标" width="24" height="24" />
    <span>这是一段文字</span>
</div>

方法三：使用line-height属性

如果容器的高度是固定的，并且文字是单行，那么可以通过设置容器的line-height等于容器高度，同时让图片垂直居中对齐来实现效果。

这种方式适合单行文字的场景，如果文字换行会出现显示异常，使用时需要注意字数限制。

.line-height-center {
    height: 40px;
    line-height: 40px; /* line-height等于容器高度 */
}
.line-height-center img {
    vertical-align: middle;
    margin-right: 8px;
}

对应的HTML结构如下：

<div class="line-height-center">
    <img src="icon.png" alt="图标" width="24" height="24" />
    <span>单行文字</span>
</div>

方法四：使用grid布局

grid布局是二维布局方案，实现垂直居中的方式也很简单，设置容器为grid布局后，设置内容在交叉轴方向居中对齐即可。

.grid-center {
    display: grid;
    align-items: center; /* 垂直方向居中 */
    grid-template-columns: auto 1fr; /* 可选，控制两列的宽度分配 */
    gap: 8px;
}

对应的HTML结构如下：

<div class="grid-center">
    <img src="icon.png" alt="图标" width="24" height="24" />
    <span>这是一段文字</span>
</div>

不同方法的适用场景

• 如果是简单的行内图文混排，优先选择vertical-align方案，代码量小且兼容性好。
• 如果是复杂的布局场景，或者需要同时处理水平和垂直对齐，优先选择flex布局，逻辑更清晰。
• 如果是固定高度的单行文字配图场景，使用line-height方案实现成本最低。
• 如果页面已经使用了grid布局体系，可以直接用grid的对齐属性实现，保持布局体系统一。

CSSvertical_alignflexline_heightgrid修改时间：2026-06-04 17:43:47