html - 如何使导航栏居中

Question

我想问一个，也许是愚蠢的问题:如何在 div podmenu 中将以下导航栏居中？我用

做了水平居中

    #podmenu{text-align:center;}

但我在垂直居中时遇到问题 - 无论我做什么，导航栏距离顶部 24 像素...请帮忙!

  <div id="podmenu">

<div style="position:relative;">
    <nav id="menu">
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="">Features</a>
        <ul>
        <li><a href="reactions.html">Reactions</a></li>
        <li><a href="">Electronegativity</a></li>
        <li><a href=""></a></li>
        </ul>
      </li>
      <li><a href="">Help</a>
        <ul>
        <li><a href="">Reactions</a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        </ul>
      </li>
      <li><a href="">Contact</a>
      </li>
    </ul>
    </nav>
    </div>

    </div>

CSS:

     #menu{display:block; positon:fixed; z-index:2;}

整个 CSS:

   nav ul ul {
    display: none;
      z-index:2;
  }
  nav ul{z-index:2; }

    nav ul li:hover > ul {
        display: block;
    }
  nav ul{

         background:linear-gradient(top,#E6E600 20%,#FFFF00 100%);
         background: -moz-linear-gradient(top, #E6E600 20%,#FFFF00 100%); 
         background: -webkit-linear-gradient(top, #E6E600 20%,#FFFF00 100%);
         padding: 0 0px;
       border-radius: 10px;  
       list-style: none;
       position: relative;
       display: inline-table;
         }
  nav ul:after 
         {
        content: ""; clear: both; display: block;
       }
  nav ul li{float:left; }
  nav ul li:hover
         {background:#6C6C18;
          background: linear-gradient(top, #E6E600 0%,  #CCCC00 40%);
        background: -moz-linear-gradient(top, #E6E600 0%, #CCCC00 40%);
        background: -webkit-linear-gradient(top, #E6E600 0%,#CCCC00 40%);
          border-top-left-radius: 10px; 
          border-top-right-radius: 10px;              
         }
  nav ul li:hover a 
  {
    color: #fff;
  }
  nav ul li a 
  {
    display: block; padding: 15px 30px;
    color: #7A991F; text-decoration: none;
  }
  nav ul ul
  {
      background:   #B2B200; border-radius:0; padding:0; position:absolute; top:100%;   
  }
  nav ul ul:hover {display:block; }
  nav ul ul li 
  {
      float:none;
      border-top:1 solid #B2B200;
      border-bottom:1 solid #B2B200;
      position:relative;
  }
  nav ul ul li a 
  {
    padding: 5px 10px;
    color: #fff;
  }
  nav ul ul li a:hover 
  {
    background: #808000;
  }
  nav ul ul ul 
  {
    position: absolute; left: 100%; top:0;
  }

无论我做什么，导航栏距离顶部 24 像素...请帮忙!

Answer 1

您需要做的就是在 CSS 中使用以下代码重置默认的 margin 和 padding 设置。

下面几行会将所有元素 (*) 的 margin 和 padding 设置为 0px开始，随后为每个选择器指定的任何设置都将接管。

* {
    padding: 0px;
    margin: 0px;
}

Fiddle Demo