如何将Font Awesome图标居中对齐

Question

我希望您能帮忙翻译一下以下内容，这是关于IT技术的。需要把Font Awesome图标与下方的文字区域居中对齐，但我无法得到想要的结果。

以下是HTML代码：

.education-title {
    font-family: Alef, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 1.5em;
    font-family: Alef, Arial, Helvetica, sans-serif;
}

.edu-container {
    padding-top:50px;
    display:flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-evenly;
    margin:auto;
    background-color: white;
    font-family: Alef, Arial, Helvetica, sans-serif;
}

.edu-text {
    text-align: center;
}

.edu-sub-text {
    text-align: left;
    
}

li > i {
    font-size: 100px;
    padding-top: 20px;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul class="edu-container">
   <h2 class="education-title">EDUCATION</h2>
   <li>
      <i id="icon" class="fas fa-laptop-code"></i>
      <h2 class="edu-text">Degree</h2>
      <p class="edu-sub-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
   </li>
   <li>
      <i id="icon" class="fab fa-free-code-camp"></i>
      <h2 class="edu-text">Degree</h2>
      <p class="edu-sub-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
   </li>
   <li>
      <i id="icon" class="fas fa-university"></i>
      <h2 class="edu-text">Degree</h2>
      <p class="edu-sub-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
   </li>
   <li>
      <i id="icon" class="fas fa-laptop-code"></i>
      <h2 class="edu-text">Degree</h2>
      <p class="edu-sub-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
   </li>
</ul>

我希望像 "degree" 单词一样将图标居中对齐，使其看起来更漂亮，但我已经尝试了我能想到的所有方法，但都没有成功。这个代码新手需要一点帮助，不胜感激！

- Darth Pizza

Answer 1

由于您在p标签上明确设置了text-align: left，所以只需简单地添加"text-align: center;"到您想要居中的元素即可。最初的回答。

.edu-container > li {
    text-align: center;
}

你不能在I标签上调用text-align: center，因为它是内联元素。

谢谢

- James Allen

---

不用谢。使用text-align的技巧在于它不会改变元素本身的对齐方式，但可以改变其内容（文本或内联元素）的对齐方式。 - James Allen

Answer 2

将图标标签放置在中心标签之间，例如：

<center>
    <i id="icon" class="fas fa-university"></i>
</center>

- Abu Osman Al Qamari