按钮内文本标签与图标垂直对齐异常的解决方法咨询

我来帮你搞定这个头疼的垂直对齐问题！看起来你已经尝试了常见的line-height和vertical-align: middle，但没见效大概率是因为Material Icons的默认样式和按钮内的文本样式冲突了。下面给你两个靠谱的解决方案，优先推荐第一个，简单又稳：

方案一：用Flexbox布局（最推荐） #

Flexbox是现代布局的首选，能轻松搞定垂直居中，完全不用纠结行高的问题。只需要给按钮加上Flex相关的样式：

<button class='btn'>
  <span>Label</span>
  <i class="material-icons right">search</i>
</button>

.btn {
  background-color: black;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  /* 核心Flex样式 */
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 可选：给文本和图标之间加个小间距，视觉更舒服 */
}

/* 可选：调整图标大小和文本匹配，避免图标过大导致对齐偏移 */
.material-icons {
  font-size: 18px; /* 可以根据你的文本字体大小调整 */
}

原理：display: inline-flex让按钮内部变成Flex容器，align-items: center会强制所有子元素在垂直方向上居中，不管它们的默认样式是什么，都能完美对齐。

方案二：统一行高与垂直对齐（兼容旧浏览器） #

如果你需要兼容一些不支持Flex的旧浏览器，可以试试这个方法，核心是让文本和图标的行高、垂直对齐属性保持一致：

.btn {
  background-color: black;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  line-height: 1; /* 重置按钮的行高，避免继承全局样式 */
}

.btn span, .btn .material-icons {
  vertical-align: middle;
  line-height: inherit; /* 让两个元素继承按钮的行高 */
}

.material-icons {
  font-size: 18px; /* 确保图标大小和文本匹配 */
}

原理：Material Icons默认是inline-block元素，自带的行高可能和文本不一致，统一设置vertical-align: middle和相同的行高后，就能让两者对齐了。

你可以先试试Flex方案，几乎不会有兼容性问题，代码也更简洁，应该能直接解决你的问题！

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