对齐无序的图像列表

Question

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

HTML：

<div id='nav'>
    <ul>
        <li>
            <a href=''><img src='images/login.png' /></a>
        </li>
        <li>
            <a href=''><img src='images/add.png' /></a>
        </li>
        <li>
            <a href=''><img src='images/forum.png' /></a>
        </li>
    </ul>
</div>

的CSS：

#nav {
    text-align: center;
}

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

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

我可以做些什么来完全集中它？

Answer 1

工作演示：http://jsfiddle.net/3d6TS/

默认情况下，<ul>标记会添加填充。您需要手动将padding:0设置为<ul>代码。

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

Answer 2

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

解决方案是显示：li上的内联

Answer 3

一个好的解决方案是保持左边距并确保第一个孩子的左边距为0.这会导致第一个和最后一个孩子在与父母相遇的边缘上没有边距。这很好，因为:first-child并没有在＆gt; = ie7中灾难性地破坏样式，而{＆lt; = ie8中的:last-child不支持，暂时不可行。

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

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