html - 如何对齐中心 Font Awesome 图标

Question

我想将超赞字体图标与较低的文本部分居中对齐，但我无法获得结果

这是 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>

我想让图标像“度”字一样居中对齐，以使其看起来不错，但我已经尝试了我想到的所有方法，但都没有奏效。如果能为这段代码 padawan 提供一点帮助，我们将不胜感激!

Answer 1

由于您明确设置了 text-align: left 在 p 标签上，因此只需添加即可

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

您不能在 I 标签上调用 text-align: center 因为它是内联的。

干杯