如何居中对齐FontAwesome图标？三图标对齐位置异常求助

嘿，刚好之前碰到过类似的布局问题，给你几个实用的方案：

一、单个FontAwesome图标的居中技巧 #

如果是想让单个图标在它的容器内居中，用Flexbox是最省心的方式：

.icon-container {
  width: 40px; /* 给容器设置明确的宽高 */
  height: 40px;
  display: flex;
  align-items: center; /* 实现垂直居中 */
  justify-content: center; /* 实现水平居中 */
}

要是图标是和文本混排的行内元素，想让它和文本垂直对齐，直接给图标加这个样式就行：

.fa {
  vertical-align: middle;
}

二、让三个图标中的第二个处于页面正中间 #

你说现在设置后第一个图标跑到了页面中间，想要换成第二个图标占这个位置，核心是让布局强制把第二个图标固定在页面水平中线上，推荐这两种方法：

方法1：Grid布局（最直观） #

给三个图标的父容器加上以下样式：

.icon-group {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左右列平分剩余空间，中间列自适应图标宽度 */
  width: 100%; /* 让父容器占满整个页面宽度 */
}

这样左右两个图标会分别靠向页面两侧，第二个图标自然就卡在页面正中间了，效果非常稳定。

方法2：Flexbox布局 #

如果更习惯用Flex，父容器可以这么设置：

.icon-group {
  display: flex;
  width: 100%;
}
/* 让第一个和第三个图标平分页面剩余空间 */
.icon-group .fa:first-child,
.icon-group .fa:last-child {
  flex: 1;
}
/* 确保中间图标在自己的区域内居中 */
.icon-group .fa:nth-child(2) {
  margin: 0 auto;
}

要是你想让第一个图标靠左显示、第三个靠右，还能给它们再加个justify-self: flex-start;和justify-self: flex-end;的样式，灵活调整位置。

小补充 #

如果图标之间需要留间距，直接给图标加margin就好，比如.fa { margin: 0 15px; }，完全不会影响居中的效果。

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