如何将图标与其标题对齐？

Question

正如您从该屏幕截图中看到的，我的图标未与其标题对齐。它们被写成两个无序列表。我现在唯一的解决办法是给每个图标单独 margin-left，但我希望有更好的方法来做到这一点。非常感谢任何帮助。

HTML:

<!-- Skills -->
<section id="skills">
  <h2>Skills</h2>
  <ul>
    <li><i class="icon-prog-java"></i></li>
    <li><i class="icon-prog-js02"></i></li>
    <li><i class="icon-html5-02"></i></li>
    <li><i class="icon-css3-02"></i></li>
    <li><i class="icon-vc-git"></i></li>
  </ul>
  <ul>
    <li>Java</li>
    <li>JavaScript</li>
    <li>HTML / XML</li>
    <li>CSS</li>
    <li>Git</li>
  </ul>
</section>

CSS:

#skills li {
  display: inline;
  margin: 0 40px;
}

Answer 1

如果我要创建这个，我将有一个列表项分组。每个

都会有图标的 img 标签以及标签或任何其他块级元素。这使我可以将 CSS 的范围限定为

，并且所有这些都会受到我的样式的影响。这就像为我的图标和标题创建单独的统一框。您现在使用的方法使它变得复杂。如果将来情况发生变化，您将需要关注两个方面。

如果你想继续沿着这条路走下去，你可以尝试给#skills li 一个固定的宽度，它们应该都排成一行。

Answer 2

将图标与每个文本项集成在一起。然后，通过使图标成为块元素，使它们位于单独的一行上。此外，每个列表项都需要 inline-block 而不是 inline:

#skills li {
  display: inline-block;
  margin: 0 30px;
  text-align: center;
}
ul.skill-list i {
  display: block;
  /* add margins here to adjust icons */
}

<!-- Skills -->
<section id="skills">
  <h2>Skills</h2>
  <ul class="skill-list">
    <li><i class="icon-prog-java"></i>Java</li>
    <li><i class="icon-prog-js02"></i>JavaScript</li>
    <li><i class="icon-html5-02"></i>HTML / XML</li>
    <li><i class="icon-css3-02"></i>CSS</li>
    <li><i class="icon-vc-git"></i>Git</li>
  </ul>
</section>

<!-- Pictonic library, ignore this -->
<link href="https://cdn.jsdelivr.net/gh/thedrick/tylerhedrick.me@master/resources/pictonic/css/pictonic.css" rel="stylesheet" />

Answer 3

@MrFusion 有更好的答案。请更喜欢那个方法。

但是，如果您不希望图标和文本相同 ul，请尝试为 li 定义固定宽度。

#skills li {
    display: inline-block;
    margin: 0 40px;
    text-align: center;
    width: 100px;
}

如何将图标与其标题对齐？

How can I align icons with their titles?

html

css

position

alignment