我试图将图像链接的水平列表居中,尽管图像的左侧似乎是居中的。如您所见,图像列表的中心(大小相同)略微位于文本的右侧。
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;
}
我可以做些什么来完全集中它?
答案 0 :(得分:1)
工作演示:http://jsfiddle.net/3d6TS/
默认情况下,<ul>
标记会添加填充。您需要手动将padding:0
设置为<ul>
代码。
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
答案 1 :(得分:0)
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
解决方案是显示:li上的内联
答案 2 :(得分:0)
一个好的解决方案是保持左边距并确保第一个孩子的左边距为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;
}