为什么我的导航栏中心不显示? [英] Why won't my navbar center?

问题描述

我一直在尝试一切尝试以使该导航栏居中，但从未成功.文本对齐不起作用，margin也无效:0自动;.我尝试添加尽可能多的时间来覆盖所有空间，因为无论如何它都行不通.这是html:

I've been trying everything to try and center this navbar, but it never does. Text align doesn't work and neither does margin: 0 auto;. I tried adding that as many times as possible to cover all spaces because it wouldn't work regardless. Here's the 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;
}

您能提供的任何东西都会受到赞赏.

Anything you can provide is appreciated.

推荐答案

原因与您的#top-nav元素正在使用绝对定位这一事实有关.我知道将绝对定位的元素居中的唯一方法是知道元素的宽度.由于您的菜单为930px，因此我们可以执行以下操作:

The reason has to do with the fact that your #top-nav element is using absolute positioning. The only way that I know to center an absolutely positioned element is if you know the width of the element. Since your menu is 930px, we can do something like this:

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

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

That will basically set the left edge of the menu at 50% using the left attribute and then use a negative left margin to pull it back to be centered. One important thing to note is that this will center the menu in relation to the nearest positioned parent, or to the page if none of it's parents are positioned.

此网站对我了解CSS定位有很大帮助，并且对我来说是一个常规参考资料:学习布局

This site helped me quite a bit in understanding css positioning, and is a regular reference for me: Learn Layout

希望有帮助！

这篇关于为什么我的导航栏中心不显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！