如何居中导航菜单？ [英] How do I center the navigation menu?
本文介绍了如何居中导航菜单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用下面的代码来创建布局，问题是，导航菜单不会居中，文本中心，但导航栏的其余部分没有。
这是我的HTML：
< html xmlns =http：// www .w3.org / 1999 / XHTML>
< head>
< title>测试< /标题>
< link rel =stylesheettype =text / csshref =style.css/>
< / head>
< body>
< div id =container>
< h1>测试< / h1>
< ul id =navigation>
< li>< a href =＃>主页< / a>< / li>
< li>< a href =＃>关于< / a>< / li>
< li>< a href =＃>项目< / a>< / li>
< li>< a href =＃>联络人< / a>< / li>
< / ul>
< div id =content>
< / div>
< div id =footer>
< p>测试< / p>
< / div>
< / div>
< / body>
< / html>
以下是我的CSS：
/ ***** Body ***** /
body {
font-family：arial，helvetica;
text-align：center;
}
div＃容器{
}
/ *****导航菜单***** /
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;
背景：＃485e49;
color：#eee;
float：left;
text-align：center;
}
ul＃navigation a：hover {
background：＃FF00FF;
text-align：left;
}
ul＃navigation a：active {
text-align：right;
解决方案
更改 ul＃navigation to
ul＃navigation {
padding：0;
list-style：none;
width：400px;
margin：0 auto;
}
示例： http://jsfiddle.net/jasongennaro/3WS7B/
发生了什么事情是您的宽度已关闭。一旦固定为 400px ，应用 margin：0 auto 就可以了。
I am using the following codes to create a layout, the issue is, the navigation menu won't center, the text centers, but the rest of the navigation bar doesn't.
Here is my 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>
And here is my 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;
}
解决方案
Change your ul#navigation to
ul#navigation {
padding: 0;
list-style: none;
width:400px;
margin:0 auto;
}
Example: http://jsfiddle.net/jasongennaro/3WS7B/
What happened is your width was off. Once that was fixed to 400px, applying margin:0 auto worked.
这篇关于如何居中导航菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
