在页面上居中导航不起作用？

Question

我正在做噩梦，试图将导航集中在网页上。代码如下：

HTML:
<div class="header">
<div class="header-inner">
<div class="logo">
</div><!-- logo -->
<div class="toggle">
<a class="toggleMenu" href="#">Menu</a>
</div><!-- toggle -->
<div class="nav"> 
<div class="menu-menu-1-container">
<ul id="menu-menu-1" class="menu">
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-5"><a href="#">Home</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="#">Sample Page</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7"><a href="#">Stat</a></li>
</ul>
</div>                            
</div><!-- nav --><div class="clear"></div>
                </div><!-- header-inner -->
        </div><!-- header -->

CSS:

 .header .header-inner {
     margin: 0px auto;
     padding: 0px;
     position: relative;
     width: 1160px;
 }

.header .header-inner .nav {
    margin: 0px;
    padding: 0px;
    text-align: right;
    float: right;
}

谁能告诉我导航如何在页面上居中？非常感谢！

Answer 1

我有点不清楚你想要什么 - 似乎你有一些 CSS 类没有 HTML divs（没有 'Header' 或 'Header-Inner' 在你的 HTML）。但是，让我们只采用我认为您想要居中的 div 'nav'：

所以首先，因为默认情况下 div 填充 100% 宽度，我们需要将其缩小。否则居中将无济于事——宽度为 100% 的东西当然已经居中了。然后我们简单地让 margin-left 和 margin-right 自动。例如：

.nav {
   margin-left: auto;
   margin-right: auto;
   width: 20%;
}

Answer 2

您需要做的是将 .nav ul 设置为 text-align:center ，使 ul 中的所有 li 居中。然后将 .nav ul li 设置为 display: inline-block;它将每个 li 包裹到您设置的宽度，因此它不会占用整个 space。我将你的宽度设置为 % 以使其移动，但如果你愿意，你可以使用像素 http://jsfiddle.net/2k8y63xe/

css:

 .header .header-inner {
 margin: 0px auto;
 padding: 0px;
 position: relative;
 }

.header .header-inner .nav {
margin: 0px auto;
padding: 0px;
}

.nav ul { margin: 0px auto; padding: 0px; text-align: center;}
.nav ul li { text-align: center; text-decoration:none; list-style-type:none;    display: inline-block; width: 30%;}

在页面上居中导航不起作用？

Centring nav on page isn't working?

css

navigation

center