如何将我的 CSS 菜单居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5137874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to centre my CSS menu?
提问by Mawg says reinstate Monica
First posted working code gets awarded the answer...
第一个发布的工作代码获得了答案......
Here's a simple web-page with a CSS drop-down menu
这是一个带有 CSS 下拉菜单的简单网页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Center menu test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css_menu.css">
</head>
<body>
<div class="menu">
<ul><li><a href="home.html">Home</a></li></ul>
<ul>
<li><a href="home.html">Menu with items</a>
<ul>
<li><a href="home.html#anchor_1">one</a></li>
<li><a href="home.html#anchor_2">two</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
and here is the corresponding CSS :
这是相应的 CSS ：
.menu {margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px; clear:both;}
/*Color navigation bar normal mode*/
.menu a,
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font-weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}
.menu ul {list-style-type:none;padding:0; margin:0;}
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}
.menu ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
Why isn't the menu centered on the page?
为什么菜单不以页面为中心？
采纳答案by alex
Its width is 100%, so it is centered, but not centred visibly (how can you center something that takes up 100% of the width?).
它的宽度是100%，所以它是居中的，但不是明显居中（你怎么能把占据 100% 宽度的东西居中？）。
It may be easier to understand by looking at this fiddle.
查看这个 fiddle可能更容易理解。
Thirtydotalso points out that margin: 8pxis clobbering your previous setting of margin-leftand margin-right.
Thirtydot还指出，这margin: 8px正在破坏您之前的margin-leftand设置margin-right。
Update
更新
I would recommend changing your markup - having each in a separate ulis confusing.
我建议更改您的标记 - 将每个标记分开ul是令人困惑的。
回答by Jared
Set margin:autoto center an element.
设置margin:auto为中心元素。
IE is a bit picky with centering elements, so do some tests. If it doesn't work in IE, set text-align:centerto center the element's contents. Beware though, text-alignis inherited as it cascades.
IE 对居中元素有点挑剔，所以做一些测试。如果它在 IE 中不起作用，请将text-align:center元素的内容设置为居中。但要注意，text-align它是在级联时继承的。
回答by Jason
Try this.
尝试这个。
body{
text-align:center;
}
.menu{
margin: 0 auto;
text-align:left;
width:750px; /*change width as needed*/
}
回答by charles
use display:inline for li & margin:auto and text-align:center for Ul
使用 display:inline for li & margin:auto 和 text-align:center for Ul
.header {
background: none repeat scroll 0 0 #231F20;
clear: both;
height: 20px;
}
.header ul {
clear: both;
height: 20px;
margin: auto;
text-align: center;
}
.header ul li {
display: inline;
list-style-type: none;
padding: 0 20px;
}
Here header is the div containing the menu ul & li
这里的标题是包含菜单 ul 和 li 的 div
