如何用Flex Box+Font Awesome实现联系页并解决图标错位问题

看起来你已经用Flexbox搭好了联系页的基础布局，不过当地址文本变多换行时图标错位的问题，完全可以通过调整Flex属性和图标居中方式来解决，不用依赖Bootstrap。

问题分析 #

你原本给.fa设置了line-height:30px来让图标居中，同时li用align-items:center让图标和文本垂直对齐。但当文本变成多行时，这种line-height和Flex对齐的叠加方式，容易导致视觉上的错位。而且直接给图标元素设置宽高和行高，不如用Flex本身来实现居中更灵活可靠。

解决方案 #

1. 给图标元素添加display: flex，用align-items: center和justify-content: center替代原来的line-height和text-align，让图标在自身容器内完美居中。
2. 给图标加上flex-shrink: 0，确保它的宽度不会被多行文本挤压（虽然你已经设了固定width，但这个属性能进一步保障布局稳定）。
3. 保留li的align-items: center，这样不管文本是一行还是多行，图标都会和文本块的垂直中心对齐，彻底避免错位问题。

修改后的完整代码 #

* { margin: 0; }
section { 
  background-color: #555; 
  padding: 2rem 0; 
  text-align: center; 
}
.contact { 
  display: inline-block; 
  text-align: left; 
}
.contact h2 { 
  color: white; 
  font-size: 1.125rem; 
  font-weight: 500; 
  text-align: center; 
  text-transform: uppercase; 
  margin-bottom: 20px; 
}
.contact li { 
  display: flex; 
  align-items: center; 
  margin-bottom: 10px; 
}
.contact li:last-child { margin: 0; }
.contact a { 
  color: white; 
  text-decoration: none; 
}
.contact a:hover { color: yellow; }
.contact p { 
  color: white; 
  line-height: 1.4; 
}
.contact .fa { 
  color: white; 
  font-size: 1.5rem; 
  margin-right: 10px; 
  width: 30px; 
  height: 30px;
  /* 用Flex替代line-height实现图标居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 防止图标被文本挤压 */
}

<section>
 <div class="contact">
 <h2>Contact us</h2>
 <ul>
 <li>
 <i class="fa fa-envelope"></i>
 <a href="#">questions@newco.com</a>
 </li>
 <li>
 <i class="fa fa-phone"></i>
 <a href="#">111-222-333</a>
 </li>
 <li>
 <i class="fa fa-building-o"></i>
 <p>NewCo, Inc <br> 123 Main St. <br> Somewhere, CA 12345 <br> This is an extra line to test multi-line text layout</p>
 </li>
 </ul>
 </div>
</section>

额外优化选项 #

如果你更希望图标和文本的顶部对齐（而非中心对齐），只需要把li的align-items: center改成align-items: flex-start即可，这样即使文本有很多行，图标也会和文本顶部保持对齐，同样不会出现错位。

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