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

Answer 2

嗨，如果您想要一个中心区块示例#menu或父级，您可以使用该样式：

#podmenu{position relative; width:100%; height:300px;}    
div{position: absolute; width: 406px; height: 82px; top:50%; margin-top:-41px; left:50%; margin-left: -203px;}

你可以使用anatoher方法

display：table;

如何使导航栏居中

2 个答案: