如何将图片图标与堆叠排布的标题、副标题文本对齐（不使用字体图标）

数据老陈

2026-10-6

图片图标与标题、配套文本对齐解决方案

问题原因

你当前代码中，图标容器、标题、描述文本是flex容器的三个同级子项，align-items: center会让三个子项全部整体垂直居中，无法实现图标和标题对齐、描述文本自然排在标题下方的效果。

修改方案

第一步：调整HTML结构

将右侧标题和描述文本包裹到独立容器中，同时移除包裹图片的多余p标签（该标签默认自带边距会造成偏移，如需保留可单独给该p设置margin: 0消除默认边距）：

<div class="icon-area">
  <img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
  <div class="text-wrapper">
    <h3 class="icon-header">纸质选票查验</h3>
    <p>对所有选票进行全量清点，包括扫描及人工目视核验环节。</p>
  </div>
</div>

第二步：调整CSS样式

/* 若全局已做边距重置可省略该段 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.soccer-icon {
  width: 50px;
  /* 可选：需要图标和标题垂直居中对齐就保留这行，需要图标和标题顶部对齐就删掉 */
  align-self: center;
  /* 图标和右侧文本的间距 */
  margin-right: 20px;
}

.icon-header {
  font-size: 18px;
  line-height: 32px;
  /* 标题和下方描述文本的间距，可自定义调整 */
  margin-bottom: 4px;
}

.icon-area {
  display: flex;
  /* 可选：需要图标和标题顶部对齐就保留这行，需要图标和标题垂直居中就删掉 */
  align-items: flex-start;
}