HTML中div垂直居中求助：图标与文本垂直对齐问题

DevOps 小满

2026-8-23

解决Div居中与图标文本垂直对齐问题

以下是几种实用的CSS方案，帮你快速实现需求：

方案1：Flexbox（推荐）

Flexbox是目前最灵活的布局方式，能轻松实现垂直对齐和整体居中：

HTML结构

<div class="container">
  <div class="icon-text-item">
    <img src="your-icon.png" alt="图标">
    <h4>对应文本</h4>
  </div>
  <!-- 更多条目重复上述结构 -->
</div>

CSS代码

/* 整体容器水平居中 */
.container {
  width: 70%; /* 可根据需求设置固定宽度（如600px）或百分比 */
  margin: 0 auto;
}

/* 单个条目内垂直对齐 */
.icon-text-item {
  display: flex;
  align-items: center; /* 核心属性：垂直居中 */
  gap: 10px; /* 图标与文本的间距，按需调整 */
  margin: 12px 0; /* 条目之间的间距 */
}

/* 清除h4默认margin避免间距混乱 */
.icon-text-item h4 {
  margin: 0;
}

方案2：Grid布局

适合需要更精细列控制的场景：

CSS代码

.container {
  width: 70%;
  margin: 0 auto;
}

.icon-text-item {
  display: grid;
  grid-template-columns: auto 1fr; /* 图标占自适应宽度，文本占剩余空间 */
  align-items: center; /* 垂直居中 */
  gap: 10px;
  margin: 12px 0;
}

.icon-text-item h4 {
  margin: 0;
}

方案3：行内元素对齐（简单场景）

如果布局较简单，可通过行内元素属性实现：

CSS代码

.container {
  width: 70%;
  margin: 0 auto;
}

.icon-text-item img,
.icon-text-item h4 {
  vertical-align: middle; /* 核心属性：垂直对齐 */
  display: inline-block;
  margin: 0;
}

.icon-text-item img {
  margin-right: 10px; /* 图标与文本的间距 */
}

.icon-text-item {
  margin: 12px 0;
}