使用Flexbox在下方创建2x2网格的Font Awesome图标和文本

Question

我正在尝试创建一个响应式2x2网格的Font Awesome图标，文字位于其下方，两者都位于其包含 li 元素的中心。我目前正在尝试使用Flexbox在列表中使用a method that I used when I was doing something similar with images，但它似乎无法正常工作。

这是我目前的HTML：

<section id="services">
    <h2>What we do best:</h2>
    <ul class="fa-ul">
      <li>
         <span class="fa-stack fa-2x">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-wrench fa-stack-1x fa-inverse"></i>
         </span>
         <p>Application Support</p>
      </li>

      <li>
         <span class="fa-stack fa-2x">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-users fa-stack-1x fa-inverse"></i>
         </span>
         <p>User Training</p>
      </li>

      <li>
         <span class="fa-stack fa-2x">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-headphones fa-stack-1x fa-inverse"></i>
         </span>
         <p>SharePoint Consulting</p>
      </li>

      <li>
         <span class="fa-stack fa-2x">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-magic fa-stack-1x fa-inverse"></i>
         </span>
         <p>Custom Development</p>
      </li>
    </ul>
 </section>

和CSS：

#services{
margin: 0 auto;
}

#services h2{
margin-left: 1rem;
margin-top: 0;
padding-top: 2rem;
}

#services ul{
display: flex;
flex-flow: row wrap;
}

#services li{
margin: .55rem;
font-size: .85rem;
flex-basis: calc(50% - 20px);
}

.fa-circle{
color: #30C0D8;
}

那段代码让我来到这里：

这种方法适用于这种情况还是有更好的方法？出于某种原因，作为旁注，当我展开窗口时，我的第二列图标移动而第一列图标保持不变。任何想法为什么会这样？这是一个截图：

谢谢！

Answer 1

我认为text-align: center;可以帮助您#services li