在页面上居中导航无效?

时间:2015-07-28 13:08:02

标签: css navigation center

我正在尝试将导航中心放在网页上。代码如下:

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

任何人都可以建议导航如何在页面上居中?非常感谢提前!

2 个答案:

答案 0 :(得分:0)

我不清楚你有什么感觉 - 似乎你有一些没有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%;
}

答案 1 :(得分:0)

您需要做的是将.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%;}