Font Awesome图标对齐问题求助：尝试多种方法仍无法解决

看起来你是在尝试用Foundation框架让Font Awesome的向下箭头图标居中，但折腾了text-align和各种布局都没搞定对吧？我帮你分析下问题所在，再给几个可行的修复方案：

问题根源 #

你的父容器用了Foundation的columns类，这个类默认会添加float: left属性。虽然text-align: center理论上对inline-block元素生效，但浮动容器的内部布局有时候会被框架自带的内边距、浮动特性干扰，导致图标看起来没居中。另外也得留意hvr-hang这个hover动画类是否有额外的定位/变换样式，可能让图标偏移。

修复方案1：调整父容器样式，抵消浮动影响 #

给父容器添加float: none和margin: 0 auto，既让这个1/3宽度的columns容器本身在页面中居中，也确保内部的text-align: center能正常生效：

<div style="text-align: center; float: none; margin: 0 auto;" class="small-4 medium-4 large-4 columns">
  <i class="fa fa-angle-double-down hvr-hang down"></i>
</div>

修复方案2：让图标自身块级居中 #

把.down类改成display: block，然后用margin: 0 auto实现水平居中，不需要依赖父容器的text-align：

.down{ 
  display: block; 
  font-size: 40px; 
  color: white; 
  width: 50px; 
  height: 50px; 
  margin: 0 auto;
}

对应的HTML可以简化（如果不需要父容器的text-align）：

<div class="small-4 medium-4 large-4 columns">
  <i class="fa fa-angle-double-down hvr-hang down"></i>
</div>

额外检查点 #

如果还是没生效，建议排查hvr-hang类的样式，比如是否有transform: translateY()这类属性，可能会让图标垂直偏移。可以给.down添加transform-origin: center确保动画不会打乱居中位置，或者调整动画的参数。

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