如何实现图标大于文本且二者垂直居中？按钮图标文本对齐求助

别担心，这个图标和文本对齐的问题很好解决！核心是用Flex布局来控制按钮内部元素的排列，既能让图标比文本大，还能轻松实现垂直居中。

问题分析 #

你当前的代码只设置了按钮的基础样式，但没有处理内部图标和文本的布局规则，所以才会出现对齐混乱的情况。Flex布局是现在处理这类对齐问题最简洁的方案。

修改后的完整代码 #

<!-- 先确保Font Awesome的链接正确引入 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

<style>
.btn {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 17px;
  background: #72a031;
  /* 关键：用flex布局实现内部元素垂直居中 */
  display: inline-flex;
  align-items: center;
  padding: 12px 30px 12px 25px; /* 调整内边距让按钮更美观 */
  text-decoration: none;
  gap: 8px; /* 控制图标和文本的间距，比margin更灵活 */
}

.btn:hover {
  background: #61872c;
  text-decoration: none;
}

/* 设置图标尺寸大于文本 */
.btn i {
  font-size: 24px; /* 这里可以根据需求调整大小 */
}
</style>

<!-- 使用示例 -->
<a href="#" class="btn">
  <i class="fa fa-check-circle"></i>
  提交按钮
</a>

关键修改点说明 #

• display: inline-flex：把按钮变成弹性容器，同时保持inline特性（不占满整行）
• align-items: center：让容器内的图标和文本垂直方向居中对齐
• gap: 8px：统一控制图标和文本之间的间距，比单独给图标加margin更易维护
• 单独给.btn i设置更大的font-size：实现图标尺寸大于文本的需求
• 调整了padding：原来的上下内边距是0，会让按钮高度太窄，适当增加后视觉效果更好

额外提示 #

如果你的图标是<img>标签而不是Font Awesome的<i>，只需要把.btn i改成.btn img，然后设置width和height即可，Flex布局的对齐逻辑完全通用：

.btn img {
  width: 24px;
  height: 24px;
}

这样改完后，不管图标多大，都能和文本完美垂直居中啦！

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