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

【问题标题】：How can I align icons with their titles?如何将图标与其标题对齐？
【发布时间】：2015-05-01 16:17:19
【问题描述】：

从这个屏幕截图可以看出，我的图标与其标题不一致。它们被写成两个无序列表。我现在唯一的解决方案是为每个图标提供单独的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;
}

【问题讨论】：

如何在每个文本列表项中包含图标？（例如<li><i class="icon-prog-java"></i>Java</li>）
这会将图标放在单词旁边。我希望把它们放在每个单词的前面。

标签： html css position alignment

【解决方案1】：

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

将具有图标的 img 标记以及标记或任何其他块级元素。这允许我将我的 CSS 范围限定为

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

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

【讨论】：

【解决方案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" />

【讨论】：

感谢您的帮助！也很抱歉没有链接到 pictonic css，道具自己弄清楚:)

【解决方案3】：

@MrFusion 有更好的答案。请选择该方法。

但如果您不希望图标和文本位于同一 ul 中，请尝试为 lis 定义固定宽度。

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

【讨论】：