如何对齐居中字体真棒图标

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

由于您明确设置了文本对齐：在 p 标签上左侧，因此只需添加

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

不能调用文本对齐：以 I 标记为中心，因为它是内联的。

干杯

Answer 2

将图标标签放在中心标签之间，如下所示：

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