Html 将无序的图像列表居中

我正在尝试将图像链接的水平列表居中，尽管图像的左侧似乎居中。如您所见，图像列表的中心（大小都相同）略微位于文本的右侧

HTML:

我该怎么做才能使它完全居中

 #nav  { text-align: center; }
 #nav ul { list-style: none; }
 #nav ul li { display: inline; }

---

解决方案是显示：在li上内联一个好的解决方案是保持左边距，并确保第一个子项的左边距为0。这会导致第一个子级和最后一个子级与父级相交的边上都没有边距。这很好，因为

：first child

不会严重破坏>=ie7中的样式，而工作演示中不支持as

：last child

默认情况下，

标记添加填充。您需要手动将

填充：0

设置为

标记

#nav ul {
   list-style: none;
   margin: 20px auto;
   padding:0;
}

---

同样的事情也在发生。谢谢你的回答，尽管当我认为我已经修复了它时，我错了。我的解决方案看起来只是让它看起来更居中，尽管事实上如果我将边距增加到60px，同样的结果也会出现。我刚刚尝试了这个解决方案，再一次，我得到了完全相同的结果。

 #nav  { text-align: center; }
 #nav ul { list-style: none; }
 #nav ul li { display: inline; }

#nav ul li {
    display: inline-block;
    margin-left:30px;
}

#nav ul li:first-child {
    margin-left:0;
}

#nav ul {
   list-style: none;
   margin: 20px auto;
   padding:0;
}