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

从这个屏幕截图可以看出，我的图标与其标题不一致。它们被写成两个无序的列表。我现在唯一的解决办法是给每个图标留出单独的

空白

，但我希望有更好的方法。任何帮助都将不胜感激

HTML:

---

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

都有图标的img标记以及标记或任何其他块级元素。这允许我将CSS的范围扩展到

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

---

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

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

内联块

，而不是

内联块

：

#技巧{
显示：内联块；
利润率：0.30px；
文本对齐：居中；
}
技能清单一{
显示：块；
/*在此处添加边距以调整图标*/
}

技能

爪哇
JavaScript
HTML/XML
CSS
吉特

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

但如果您不希望图标和文本处于相同的

ul

中，请尝试为

li

s定义固定宽度

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

---

在每个文本列表项中包含图标怎么样？（例如，

Java

）将图标放在单词旁边。我希望能让他们掌握每一个单词。谢谢你的帮助！也很抱歉没有链接到pictonic css，这是你自己弄明白的道具：）

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

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