Question

我尝试了很多方法，但无法将此菜单置于中心位置..有任何想法吗？

您可以在此处查看该页面： http://jsbin.com/obecig/1/edit

我在#nav ul选择器中尝试了text-align：center但没有运气..

<html>
<head>
<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }
</style>
</head>

<body>
<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        <ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>
</body>

</html>

Answer 1

看到每个人如何回答同样的事情，没有人费心去解释原因......我们走了：

众所周知，当你不知道怎样时，以块级元素为中心可能会很痛苦。首先，我们大多数人都知道margin: 0 auto;有效，但不是每个人都知道原因。

margin: 0 auto;的快速细分与CSS接受某些属性的简写符号的方式有关。说margin你当然是针对给定元素的边距而0部分使用简写符号来表示：顶部为0，底部为0 ......同时添加{{1}你最后说的是：左边的自动边距和右边的自动边距。

如果您没有为相关元素定义宽度，则上述操作无效。在这种情况下，元素的ID属性为auto ...这就是为什么每个人在答案中给出的示例都有固定的宽度。这背后的逻辑是块级元素默认扩展它的父容器的100％，除非你在CSS中特别定义。

所以理论上这也适用于居中，虽然它是更多的标记而不是简单的最佳方法，但我只是为了说明目的而展示它。

#nav

每个人都习惯于这样看待它...我们这样使用它因为它更短。

#nav {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

零不是必须的......请记住，它是元素的顶部和底部边距。所以说，这是一个元素的例子，底部有一个20像素的边距并居中。

#nav {
  width: 300px;
  margin: 0 auto;
}

最后但并非最不重要......此属性的简写表示法（#nav { width: 300px; margin: 0 auto 20px auto; }）与：margin，border等相同。它来自Top ...顺时针转到左边，右边和底部在两者之间。

所以它是：顶部，右侧，底部，左侧。像这样：padding

Answer 2

您需要为其指定宽度，然后将水平边距设置为自动。这是最快捷的方式。

将此添加到您的css：

#nav
{
     width:100px;
     margin: 0 auto;
}

Answer 3

要居中，需要宽度和边距：0自动，所以如果添加此代码：

#nav { 
  width: 100px; 
  margin: 0 auto; 
}

它应该（并为我做）工作

Answer 4

#nav{
 width:80px;
 margin: 0 auto;}

如何将这个CSS菜单居中？

4 个答案: