如何将我的CSS菜单居中？

Question

如何将我的CSS菜单居中？

3

首个发布的可工作代码将获得答案奖励...

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

为什么菜单没有居中显示在页面上？

- Mawg says reinstate Monica

你尝试过在菜单周围添加一个div，将其设置为100％宽度并设置position：relative吗？ - Dave L

4个回答

1

试试这个。

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

- Jason

1

使用margin:auto来居中一个元素。

IE对于居中元素有些挑剔，因此需要进行一些测试。如果在IE中无法正常工作，则设置text-align:center以居中元素的内容。但要注意，text-align是继承的，因为它具有级联性。

- Jared

+1 我会尝试，但我更希望有人发布一些工作代码，因为我远非CSS大师。 - Mawg says reinstate Monica

0

请使用"display:inline"为li元素设置样式，同时使用"margin:auto"和"text-align:center"为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;
}

这里的header是包含菜单ul和li的div

- charles

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alex · Accepted Answer

它的宽度是100％，所以它是居中的，但不是可见的居中（如何使占据100％宽度的东西居中？）。

通过查看这个示例可能更容易理解。

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

更新

这是它的工作方式。

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