如何使用CSS实现文本与ICON对齐 解决第二行文本与首行不对齐问题

实现对齐效果的两种常用方案 #

方案1：Flex布局（推荐，兼容性覆盖绝大多数现代浏览器） #

适合可以调整HTML结构的场景，只需给图标和文本外层加一个父容器，配合简单CSS即可实现：

1. 调整HTML结构，添加父容器

<div class="icon-text-group">
  <img src="https://stgbusiness.wpengine.com/wp-content/uploads/2021/10/modules-icon.png" />
  <span class="m-icons">Contracts, Business Valuation and Pricing Negotiations</span>
</div>

2. 添加对应CSS样式

.icon-text-group {
  display: flex;
  /* 图标和第一行文本顶对齐，要居中对齐可以改成align-items: center */
  align-items: flex-start;
  /* 图标和文本的间距，可自行调整 */
  gap: 12px;
}
.icon-text-group .m-icons {
  flex: 1;
  line-height: 1.5; /* 可根据设计要求调整行高 */
}

方案2：绝对定位（无需修改现有HTML结构） #

如果只能修改CSS不能调整HTML代码，可以用这个方案：

/* 注意选择器优先级，需要覆盖原有样式的话可以适当提高优先级 */
img[src*="modules-icon.png"] {
  position: absolute;
  left: 0;
  top: 3px; /* 微调图标垂直位置适配文本 */
  width: 24px; /* 替换为你的图标实际宽度 */
}
.m-icons {
  display: block;
  /* 缩进值要大于图标宽度，留出图标放置空间，可自行调整 */
  padding-left: 36px;
  position: relative;
  line-height: 1.5;
}

注意：使用该方案时要确保.m-icons的上级父元素没有额外设置position: relative，否则图标定位会错位，可根据实际结构调整relative的设置位置和图标left值即可。

两种方案都可以实现你要的多行文本全部和第一行文本对齐、图标单独在左侧的效果，根据你的实际开发场景选择即可。

内容的提问来源于stack exchange，提问作者Jeffrey Jade Portillo