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

我不清楚你有什么感觉 - 似乎你有一些没有HTML divs的CSS课程（没有＆＃39; Header＆＃39;或＆＃39 ;标题 - 内在＆＃39;在您的HTML中）。但是，让我们来看看div＆＃39; nav＆＃39;我认为你想要集中精力：

首先，因为默认情况下div填充100％宽度，我们需要将其缩小。否则，居中将无所作为 - 当然，100％宽度已经集中在一起。然后我们简单地使margin-left和margin-right auto。举个例子：

.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包裹到您设置的宽度，因此它不占用整个空间。我将您的宽度设置为％以使其可移动，但如果您想要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 个答案: