IE11中如何垂直对齐按钮内的Google Material Icons？

嘿，我之前也踩过这个坑！Material Icons作为字体图标，有时候会因为字体基线的默认设置，在按钮里莫名偏上，光调padding和margin确实很难搞定。给你几个亲测有效的解决办法：

方法1：用Flexbox一键居中（最省心） #

直接给按钮开启Flex布局，让内部元素自动垂直居中，不管按钮高度怎么变都能适配：

.button {
  display: flex;
  align-items: center;
  /* 可选：加justify-content: center让水平也居中 */
  /* 如果按钮有内边距，记得保留，比如padding: 8px 16px; */
}

这种方式不用单独调整图标，按钮里的任何内容（图标+文字）都会自动对齐到中心，非常实用。

方法2：调整图标的vertical-align属性 #

因为Material Icons是字体，默认的垂直对齐可能不是middle，直接给图标标签设置：

.material-icons {
  vertical-align: middle;
  /* 如果还是有点偏，可以微调像素，比如vertical-align: -2px; 按需调整 */
}

这个方法适合不想改动按钮整体布局的情况，只针对图标本身调整。

方法3：统一按钮和图标的line-height #

如果你的按钮有固定高度，可以把按钮和图标的line-height设为相同值，让字体图标沿着基线对齐：

.button {
  height: 44px; /* 假设按钮高度是44px */
  line-height: 44px;
  padding: 0 12px; /* 保持按钮的内边距 */
}
.material-icons {
  line-height: 44px;
}

注意如果按钮里还有文字，也要确保文字的line-height和按钮一致，避免错位。

额外排查：检查CSS冲突 #

如果上面的方法都没用，打开浏览器开发者工具（F12），选中按钮和图标元素，看看是不是有其他CSS规则（比如继承的padding、margin或者position属性）悄悄影响了位置，把冲突的样式覆盖掉就好啦。

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