使用HTML&CSS实现6个图标（每行2个）及右侧两行文本布局

步骤1：调整HTML结构 #

把每个图标+文本的组合封装成独立项目容器，外层用总容器包裹，方便控制整体布局：

<div class="icon-wrapper">
  <!-- 第1个图标项目 -->
  <div class="icon-item">
    <img src="/uploads/2023/02/Aargang.svg" class="ikon1" alt="Year">
    <div class="ikontext">
      Year<br>
      <strong>2011</strong>
    </div>
  </div>
  <!-- 第2个图标项目 -->
  <div class="icon-item">
    <img src="/uploads/2023/02/xxx.svg" class="ikon1" alt="xxx">
    <div class="ikontext">
      xxx<br>
      <strong>xxx</strong>
    </div>
  </div>
  <!-- 第3-6个项目复制上述结构即可 -->
  <div class="icon-item">...</div>
  <div class="icon-item">...</div>
  <div class="icon-item">...</div>
  <div class="icon-item">...</div>
</div>

步骤2：添加CSS解决两个问题 #

/* 外层容器：实现每行2个图标布局 */
.icon-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行2列，宽度均分 */
  gap: 20px; /* 项目间间距，可按需调整 */
  padding: 20px; /* 可选：给外层加内边距 */
}

/* 单个图标项目：实现图标与文本垂直对齐 */
.icon-item {
  display: flex;
  align-items: center; /* 让图标和文本垂直居中对齐 */
  gap: 10px; /* 图标和文本的水平间距，可按需调整 */
}

/* 可选：统一图标大小 */
.ikon1 {
  width: 40px;
  height: auto;
}

/* 可选：优化文本排版 */
.ikontext {
  line-height: 1.4; /* 调整两行文本的行间距 */
}

关键说明 #

• 每行2个布局：通过grid-template-columns: repeat(2, 1fr)实现，Grid会自动将6个项目分成3行2列，后续项目数量变化也能自动适配。
• 文本对齐：用flex + align-items: center让图标和文本垂直居中，搭配gap控制间距，比inline-block更灵活可控。

内容的提问来源于stack exchange，提问作者eMikkelsen