Question

我无法将菜单放在标题栏中。

我已经尝试了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

尝试这样的代码而不是显示属性。有没有理由使用＆＃34; display：table＆＃34;？

更新CSS

$('.ui.modal').modal({
        onApprove : function() {
          //Submits the semantic ui form
          //And pass the handling responsibilities to the form handlers,
          // e.g. on form validation success
          $('.ui.form').submit();
          //Return false as to not close modal dialog
          return false;
        }
    });

var formValidationRules =
{
    title: {
        identifier  : 'title',
        rules: [
            {
                type   : 'empty',
                prompt : 'Please enter a title'
            },
            {
                type   : 'length[2]',
                prompt : 'At least 6 characters'
            }
        ]
    }
}

var formSettings =
{
    onSuccess : function() 
    {
      //Hides modal on validation success
      alert("Valid Submission, modal will close.");
      $('.modal').modal('hide');
    }
}

$('.ui.form').form(formValidationRules, formSettings);

Answer 2

中心（table-cell）div需要在容器（table）div下直接。

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

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

以下是一个例子：

＆＃13;

#mainnav {
  height: 50px;
  border: 1px solid #ccc;
  display: table;
  padding: 20px;
}

#mainnav .menu-item {
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

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使用默认保证金＆amp;填充如果没有设置。

标题中的垂直菜单中心

3 个答案:

更新CSS