如何对齐段落标签内a标签中的文本与图标

算力阿峰

2026-7-20

实现段落内按钮图标与文本的对齐效果

要达到参考图里的图标与文本对齐效果，给你的HTML添加以下CSS样式即可：

你的原有HTML代码

<div class="application-intro">
  <p><a class="btn" href=""><i class="fas fa-file-pen"></i><span>Sample text 1</span></a></p>
  <p><a class="btn" href=""><i class="fas fa-file-arrow-up"></i><span>Sample text 2</span></a></p>
  <p><a class="btn" href=""><i class="fas fa-magnifying-glass"></i><span>Sample text 3</span></a></p>
</div>

核心对齐样式

/* 实现图标与文本垂直居中，控制元素间距 */
.application-intro .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 图标和文本的间距，可按需调整 */
  text-decoration: none;
  color: #333;
}

/* 给图标设置固定宽度，确保所有文本左对齐 */
.application-intro .btn i {
  width: 20px; /* 根据图标实际大小调整，保证所有图标占比一致 */
  text-align: center;
}

可选：贴近参考图的按钮美化

如果要和参考图的按钮样式更匹配，补充以下代码：

.application-intro .btn {
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.application-intro .btn:hover {
  background-color: #e8e8e8;
}

简单说明：