求助：如何实现a标签内Font Awesome图标与文字的垂直居中对齐

嘿，这个问题我太熟了！咱们一步步来解决a标签里Font Awesome图标和文字的垂直居中问题～

首先，你遇到的核心问题大概率是a标签默认是inline元素，这类元素的height属性其实不会真正生效，而且传统的垂直对齐方法对inline元素的限制很多。不过用Flexbox就能轻松搞定，这也是现在最推荐的方案。

解决方案：用Flexbox实现双居中 #

把你的.my-tile类改成下面这样，替换掉你注释掉的display: table：

.my-tile {
  height: 90px;
  margin-left: 0.5%;
  margin-right: 0.5%;
  float: left;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  /* 关键修改：启用Flex布局 */
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
  text-decoration: none;   /* 可选：去掉a标签默认的下划线，看你需求 */
}

为什么这能生效？

• display: flex把a标签变成了flex容器，它的子元素（Font Awesome图标和文字）会自动成为flex item。
• justify-content: center让所有子元素在水平方向（主轴）上居中对齐，刚好匹配你已经实现的水平效果。
• align-items: center会让子元素在垂直方向（交叉轴）上居中，完美解决你卡壳的垂直对齐问题。

备选方案：用inline-block + vertical-align（兼容旧浏览器） #

如果你需要兼容非常老的浏览器（比如IE10及以下），可以用这个方案：

.my-tile {
  height: 90px;
  margin-left: 0.5%;
  margin-right: 0.5%;
  float: left;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  display: inline-block; /* 让a标签变成块级可替换元素，height生效 */
  line-height: 90px;     /* 让文字垂直居中 */
  text-align: center;    /* 水平居中 */
}

/* 给图标和文字设置垂直对齐 */
.my-tile i, 
.my-tile span {
  vertical-align: middle;
}

不过还是更推荐Flexbox方案，代码更简洁，也不用考虑line-height和字体大小的冲突问题。

最后检查一下：确保a标签内的图标和文字没有额外的margin/padding，不然可能会影响对齐效果哦～

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