如何居中导航菜单？

我使用下面的代码来创建布局，问题是，导航菜单不会居中，文本中心，但导航栏的其余部分不会。如何居中导航菜单？

这里是我的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; 
}

来源

2011-08-21 Alper

更改ul#navigation到

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

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

发生了什么事是你width是关闭的。一旦固定到400px，申请margin:0 auto工作。

来源

2011-08-21 05:19:52

等一下，为什么宽度是一个问题？ – Purag

您应用了更多的“宽度”。 'nav'只有'400px'，但你有'525px'。这里是区别和为什么它不排队：http://jsfiddle.net/jasongennaro/3WS7B/1/ –

哦...是的，我现在看到。不，你根本没有指责。也许我是以防守的态度出现的，嘿。感谢您的解释。 :) – Purag

您可以将它添加到ul#navigation css来居中：

margin:0 auto 0 auto;

或者：

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

来源

2011-08-21 05:13:05 Purag

由于某种原因，它并不是所有的方式... – Alper

@Jacob：当然是：http://jsfiddle.net/purmou/9QAyW/ – Purag

哦...由于某种原因它没有出现在我的浏览器中为我。切换到Firefox后，它似乎工作。 – Alper

如何居中导航菜单？

回答

相关问题