header 中菜单的垂直居中

Question

我无法将菜单置于 header-bar 中心。

我已经尝试了 display: table-cell 和 display: table 但它不起作用。我唯一能做的就是固定 margin-top，我想避免它。

  <header>
          <div class="container">
                <div id="logo"></div>
                <div id="mainnav">
                  <div class="clearfix">
                        <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'depth' => 1)); ?>
                  </di>
                </div>
          </div>
  </header>


    div#mainnav {
        height: 120px;
        width: 70%;
        float: right;
        background-color: red;
        display:table; 
    }

    div.menu {
     background-color: yellow;
     display:table-cell;  
     vertical-align:middle;  
     text-align:center; }

    /* clearfix */
    div.menu ul:after {
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }

我用 cleafix 得到了 div.menu 高度（之前是 0）。

Answer 1

尝试这样的代码而不是显示属性。有什么理由使用 "display:table"?

已更新CSS

div.menu {
background-color: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 120px;}

Answer 2

居中的（table-单元格）div需要直接在容器（table）div下面.

您的代码中似乎没有 .menu，或者 PHP 生成了它 - 无论哪种方式，它都嵌套在里面。您可能希望将 #mainnav 本身作为 clearfix，以便它下面的子项将直接在那里。

<div id="mainnav" class="clearfix">
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'depth' => 1)); ?>
</div>

这是一个例子：

#mainnav {
  height: 50px;
  border: 1px solid #ccc;
  display: table;
  padding: 20px;
}

#mainnav .menu-item {
  display: table-cell;
  vertical-align: middle;
}

<div id="mainnav">
  <div class="menu-item">My menu item</div>
</div>

Answer 3

改变你的css

div.menu {
  background-color: yellow;
  vertical-align: middle;
  text-align: center;
  margin: 30px 0;
  padding: 0px 20px 0px 0px;
  }

和

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  margin: 0 auto;
  padding: 0px;
}

如果未设置，ul 使用默认边距和填充。

header 中菜单的垂直居中

Vertical center of menu in a header

css

center

已更新CSS