Question

首先发布的工作代码获得答案......

这是一个带有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>

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

为什么菜单不在页面中心？

Answer 1

它的宽度为100%，因此它居中，但不会明显居中（如何将占据宽度的东西放在中心位置？）。

通过查看this fiddle可能更容易理解。

Thirtydot还指出margin: 8px正在破坏之前margin-left和margin-right的设置。

更新

Here it is, working

我建议您更改标记 - 将每个标记放在单独的ul中会让人感到困惑。

Answer 2

将margin:auto设置为中心元素。

IE对于居中元素有点挑剔，所以做一些测试。如果它在IE中不起作用，请设置text-align:center以使元素的内容居中。但请注意，text-align在级联时会被继承。

Answer 3

试试这个。

body{
  text-align:center;
}
.menu{
  margin: 0 auto;
  text-align:left;
  width:750px; /*change width as needed*/
}

Answer 4

使用display：inline for li＆amp; margin：auto和text-align：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;
}

这里的标题是包含菜单ul和amp;的div。利

如何集中我的CSS菜单？

4 个答案:

更新