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标签上明确设置了text-align：，因此只需添加即可

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

您不能在I标记上调用text-align：居中，因为它是内联的。

欢呼

Answer 2

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

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

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

2 个答案: