Question

我一直在努力尝试将这个导航栏放在中心，但它永远不会。文本对齐不起作用，边距也不起作用：0 auto;。我尝试尽可能多地添加它来覆盖所有空间，因为它无论如何都无法工作。这是html：

 <div class="nav">
  <div class="container">
    <ul id="top-nav">
      <li class= ""><a class="first" href="#">UCMST</a></li>
      <li class=""><a href="#UCMST">About Us</a>
            <ul style="box-shadow: 0px 5px 10px #000;">
                <li><a href="#UCMST">Who We Are</a></li>
                <li><a href="#ContactUs">Our Testing Profile</a></li>
                <li><a href="#HonorAndAchievement">Honor and Achievement</a></li>

            </ul>

      </li>
       <li class=""><a href="#ContactUs">Contact Us</a></li>
       <li class=""><a href="#Classes">Classes</a></li>
       <li class="" style="width: 250px;"><a href="#ThunderChickens">Thunder Chickens</a></li>
   </ul>
  </div>
 </div>

CSS：

   .nav{
     background-color:#ffffff;
     margin-bottom: 10px;
     margin-right: auto;
     margin-left: auto;
     z-index: 1;
     text-align: center;
   }
.nav .container {
   margin: 30px auto 10px auto;
   text-align: center;
 }
#top-nav {
 margin: 10px auto 10px auto;
 padding: 0;
 list-style: none;
 height: 45px;
 width:930px;
 overflow: hidden;
 position: absolute;
 z-index: 999;
 background-color: #ffffff;
 box-shadow: 3px 3px 9px 3px #000,
    -3px 0px 9px 3px #000;

}
#top-nav:hover {  
 overflow: visible;
}

#top-nav li {
 text-align: center;
 float: left; 
 text-transform: uppercase;
 font: 1.5em  sans-serif;  
 width: 170px;
 padding-bottom: 0px;
}
#top-nav li a {
 display: block;
 text-decoration: none;
 font-weight: normal;
 text-align: center;
 color: #acacac;
 border-right: 1px solid #acacac; 
 padding-top: 12px;
 padding-bottom: 5px;
 height: 45px;
}
#top-nav li:first-child a {
 border-left: 1px solid #acacac; 
}
#top-nav > li a:hover {
 color: #ffffff;
 background: #212021;
 border: 1px solid #212021;
 height: 50px;
}
#top-nav li a.active {
 color: #ffae00;
}
#top-nav li ul {
 list-style-type: none;
 padding: 10px 0 10px 0;
 margin: 0;
 height: 150px;
 background-color: #ffffff;
}
#top-nav li ul li {
 font-size: 13px;
 padding: .3em;
 float: none;    
}
#top-nav li ul li a { 
 height: auto !important;
 border: none !important;
 padding: 3px;
}
#top-nav li ul li a:hover {
 color: #ffae00;
 background: transparent;
}

您可以提供的任何内容都表示赞赏。

Answer 1

原因与你的＃top-nav元素使用绝对定位有关。我知道将绝对定位元素居中的唯一方法是，如果您知道元素的宽度。由于您的菜单是930px，我们可以这样做：

#nav-bar {
    left: 50%;
    margin-left: -465px;
}

这将基本上使用left属性将菜单的左边缘设置为50％，然后使用负左边距将其拉回到居中位置。需要注意的一件重要事情是，这将使菜单相对于最近的父母定位，或者如果没有父母的父母定位，则将页面置于页面中。

这个网站帮助我理解了css定位，并且是我的常规参考： Learn Layout

希望有所帮助！

Answer 2

如果要将绝对位置div对齐到中心，则需要添加左：0和右：0。更新您的顶级导航CSS，如下所示。

#top-nav {
margin: 10px auto 10px auto;
padding: 0;
list-style: none;
height: 45px;
width:930px;
   overflow: hidden;
position: absolute;
z-index: 999;
  background-color: #ffffff;
box-shadow: 3px 3px 9px 3px #000,
-3px 0px 9px 3px #000;
left:0;
right:0;

}

Sample Demo

Answer 3

根本原因：您的主要容器（带有类导航的div）没有大小，因为它是一个div，它占用了100％的宽度，也许你使用的是自动保证金不是工作，因为没有申请保证金

解决方案：为类导航提供宽度。

代码： http://goo.gl/Du5kEE

Answer 4

将此添加到.nav

width: 930px;

为什么呢？因为对于保证金：0自动工作，你需要一个不同于100％的元素。

这是中间的导航栏：http://jsfiddle.net/4Smvv/1/

Answer 5

将以下内容添加到.nav css中。因此，您可以将导航栏居中。

保证金左：210px;

为什么我的导航栏不在中心？

5 个答案: