我对 HTML 和 CSS 还很陌生。我正在将菜单栏设为水平，但似乎无法将其与屏幕中心对齐。我试过margin:0 auto;和 <body align=center>但似乎都不起作用。
这是我的代码:
<html>
<head>
<style>
#menu {
margin:0 auto;
float:left;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}
#menu li {
float:left;
background-color:#f2f2f2;
}
#menu li a {
display:block;
padding:10px 80px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}
#menu li a:hover {
color:#c00;
background-color:#fff;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Donate</a></li>
</ul>
</body>
</html>
如您所见，我正在使用 margin:0 auto; , 但它不起作用。
最佳答案
你有 float 元素。除非您的容器被视为 block 或内联 block ，否则 float 元素不会遵循该居中。
要达到预期的结果，您需要执行类似 this example 中的操作.
通过添加容器、居中边距并在 #menu 上使用 display: inline-block，它们将像普通内容一样居中。请注意，这在 IE 中可能不起作用，在这种情况下，您应该添加一行 *display: inline;。
Example |代码
HTML
<div class='container'>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
CSS
.container{
text-align: center;
width: auto;
margin: 0 auto;
}
#menu {
margin:0 auto;
display: inline-block;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}
#menu li {
float: left;
background-color:#f2f2f2;
}
#menu li a {
display:block;
padding:10px 10px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}
#menu li a:hover {
color:#c00;
background-color:#fff;
}
关于html - 为什么我的菜单栏不能居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10014770/