如何對齊中心字體真棒圖標

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的一點幫助真的是apreciated！

Answer 1

由於您在p標簽上明確設置了text-align：left，因此只需添加即可

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

你不能在I標簽上調用text-align：center，因為它是內聯的。

干杯

Answer 2

將圖標標記放在中心標記之間，如：

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