html - 如何使这些菜单元素居中？

Question

如何让这个下拉菜单居中？菜单显示为左对齐，而不是居中。这让我很难过。 text-align: center 对我不起作用。非常感谢你提前。

<style>
    #dropnav
    {text-align: center; width: 960px; margin: 0 auto; display: inline-block; }

    #dropnav ul
    {text-align: center;
        list-style:none;
        position:relative;
        float:left;
        margin:0;
        padding:0
    }

    #dropnav ul a
    { 
        display:block;
        color:#333;
        text-decoration:none;
        font-weight:700;
        font-size:12px;
        line-height:32px;
        padding:0 15px;
        font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
    }

    #dropnav ul li
    {
        position:relative;
        float:left;
        margin:0;
        padding:0
    }

    #dropnav ul li.current-menu-item
    {
        background:#ddd

    }

    #dropnav ul li:hover
    {
        background:#f6f6f6
    }

    #dropnav ul ul
    {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        background:#fff;
        padding:0
    }

    #dropnav ul ul li
    {
        float:none;
        width:200px
    }

    #dropnav ul ul a
    {
        line-height:120%;
        padding:10px 15px
    }

    #dropnav ul ul ul
    {
        top:0;
        left:100%
    }

    #dropnav ul li:hover > ul
    {
        display:block
    }
</style>

html

 <nav id="dropnav">
<ul>
  <li class="current-menu-item"><a href="#">Option 1</a></li>

  <li><a href="#">Option 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </li>
  </ul></nav>

Answer 1

您不希望父容器是inline-block，而是希望它是block。而且您不想在顶级菜单中 float li - 改为制作那些 inline-block 然后删除标记中这些元素之间的空格在屏幕上它们之间没有间隙。

#dropnav {
  text-align: center;
  width: 960px;
  margin: 0 auto;
}

#dropnav ul {
  text-align: center;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0
}

#dropnav ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#dropnav ul li {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0
}

#dropnav ul li.current-menu-item {
  background: #ddd
}

#dropnav ul li:hover {
  background: #f6f6f6
}

#dropnav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}

#dropnav ul ul li {
  float: none;
  width: 200px
}

#dropnav ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#dropnav ul ul ul {
  top: 0;
  left: 100%
}

#dropnav ul li:hover > ul {
  display: block
}

<nav id="dropnav">
  <ul>
    <li class="current-menu-item"><a href="#">Option 1</a></li><li><a href="#">Option 2</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
      </ul>
    </li>
  </ul>
</nav>