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

Question

我正在尝试创建一个响应式 2x2 字体 Awesome 图标网格，下面有文本，两者都在它们包含的 li 元素中居中。我目前正在尝试使用 a method that I used when I was doing something similar with images在使用 Flexbox 的列表中，但它似乎不一样。

这是我当前的 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