html - 在灵活宽度页面的列表中居中水平导航栏

Question

我已经看到过与此类似的问题，并且我一直在尝试使代码适合我自己的情况，但我就是找不到解决这个问题的方法。

我需要一个居中的水平导航栏，上面有一个带有文本的图像。我已准备就绪，只是无法将整个列表置于页面中心。

这是我的CSS:

#mainnav { 
width: 100%;
text-align: center; }
#mainnav ul {
list-style-type: none;
text-align: center;}
#mainnav li {
display: inline;
float: left;
text-align: center;
margin-left: 3%;
margin-right: 3%;
margin-top: 10px; }
#mainnav a {
display: block;
margin-right: 0% auto;
padding-left: 0% auto; }

这是我的 html:

<div id="mainnav">
<ul><li> <a href="about.html"><img src="images/information_sm.png" border="0" /></a>
<a href="about.html">About Us</a> </li>
<li> <a href="progs.html"><img src="images/power_sm.png" border="0" /></a>
<a href="progs.html">Programs and Initiatives</a> </li>
<li> <a href="resources.html"><img src="images/documents_sm.png" border="0" /> </a>
<a href="resources.html">Resources</a> </li>      
<li><a href="feedback.html"><img src="images/mic_sm.png" border="0"></a>
<a href="feedback.html">Feedback</a></li>
<li><a href="faqs.html"><img src="images/help_sm.png" border="0"></a>
<a href="faqs.html">FAQs</a></li>
<li><a href="news.html"><img src="images/announcement_sm.png" border="0"></a>
<a href="news.html">News & Events</a></li></ul>
</div>

所以我有一个图标，然后在它的正下方是文本。这些相对于彼此居中，但是整个事情需要在页面上居中。

我很接近，但由于 li 下的“margin-left: 5%; margin-right: 5%”规范，它分散得太多了。如果我改变它，它会向左滑动。我如何让它居中并且让它不那么宽，每个列表项之间有这么多空间？

此外，是的，我确实需要具有灵活的宽度，因为这是我构建此页面的工作要求。谢谢!

Answer 1

你需要改变你的CSS如下:你不能水平对齐 float 元素

#mainnav { 
width: 100%;
text-align: center; }
#mainnav ul {
list-style-type: none;
text-align: center;}
#mainnav li {
display: inline-block;
text-align: center;
margin-left: 3%;
margin-right: 3%;
margin-top: 10px; }
#mainnav a {
display: block;
margin-right: 0% auto;
padding-left: 0% auto; }

参见 http://jsfiddle.net/FM2df/1/结果