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

【问题标题】：Centring nav on page isn't working?在页面上居中导航不起作用？
【发布时间】：2015-10-19 01:35:10
【问题描述】：

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

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;
}

任何人都可以请建议导航如何在页面上居中？非常感谢！

【问题讨论】：

您希望它们全部排成一行还是堆叠并在页面上居中？
如果可能，全部排成一行并在页面上居中？谢谢！

标签： css navigation center

【解决方案1】：

您需要做的是将 .nav ul 设置为 text-align:center ，它将所有 li 在 ul 中居中。然后将 .nav ul li 设置为 display: inline-block;它将每个 li 包裹到您设置的宽度，因此它不会占用整个空间。我将您的宽度设置为 % 以使其移动，但如果您愿意，可以使用像素 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%;}

【讨论】：

传奇，很好解释！非常感谢！
没问题，如果您有任何其他问题，请告诉我

【解决方案2】：

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

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

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

【讨论】：