如何使导航菜单居中？答案

【问题标题】：How do I center the navigation menu?如何使导航菜单居中？
【发布时间】：2011-08-21 13:19:52
【问题描述】：

我正在使用以下代码创建布局，问题是导航菜单不会居中，文本居中，但导航栏的其余部分没有。

这是我的 HTML：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="container">
    <h1>Test</h1>


    <ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
    </ul>


    <div id="content">
    </div>

    <div id="footer">
        <p>Test</p>
    </div>

    </div>
</body>

</html>

这是我的 CSS：

/***** Body *****/
body {
    font-family: arial, helvetica;
    text-align:center;
}

div#container {
}

/***** Navigation Menu *****/

ul#navigation {
    margin: 20px;
    padding: 0;
    list-style: none;
    width: 525px;
}

ul#navigation li {
    display: inline;
}

ul#navigation a {
    text-decoration:none;
    padding: 5px 0;
    width: 100px;
    background: #485e49;
    color: #eee;
    float: left;
    text-align:center;
}

ul#navigation a:hover {
    background: #FF00FF;
    text-align:left;
}

ul#navigation a:active {
    text-align:right;
}

【问题讨论】：

标签： html css alignment

【解决方案1】：

将您的 ul#navigation 更改为

ul#navigation {
    padding: 0;
    list-style: none;
    width:400px;
    margin:0 auto;    
}

示例：http://jsfiddle.net/jasongennaro/3WS7B/

您的width 已关闭。一旦将其固定为 400px，应用 margin:0 auto 就可以了。

【讨论】：

等等，为什么宽度有问题？
您应用的width 超出了必要范围。 nav 只是 400px，但你在 525px 有它。这是差异以及为什么没有排队：jsfiddle.net/jasongennaro/3WS7B/1
哦...是的，我现在明白了。不，你根本没有指责。也许我是出于防守的目的，呵呵。谢谢你的解释。 :)
总是很难在网上说出语气等，@Purmou！很高兴我们都想通了 ;-)

【解决方案2】：

您可以将其添加到 ul#navigation css 以使其居中：

margin:0 auto 0 auto;

或者：

margin-left:auto;
margin-right:auto;

【讨论】：

哦...由于某种原因，它没有出现在我的浏览器中。切换到 Firefox 后，它似乎可以工作。
@Jacob：宽度与它没有任何关系（Jason 说这是指 jsfiddle 屏幕的小尺寸）。如果您展开“结果”框，它将完美居中显示。
@Jacob。问题与Width 有关。看我的回答。
@Jacob：你用的是什么浏览器？
@Purmou，如果width与它没有任何关系，那么为什么你的小提琴在ul#navigation中有width:400px，当原始显示525px时...我指出了但你没有在回答中提到的东西？