css - 在站点标题中垂直居中 wp_nav_menu

Question

如何在网站标题中垂直居中 det wordpress 函数 wp_nav_menu？我已经使用了 learnWebCode 菜单教程链接:https://www.youtube.com/watch?v=AShql_Ap1Yo&t=568s

我已经设法将它 float 到我想要的位置，但是在我的站点标题中实现它时遇到了问题。有人有解决方案吗？

    <!-- site header -->
    <header class="site-header">
    <div class=container3>
    <h1 class="logo-title"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    </div>


    <nav class="site-nav">


        <?php

        $args = array(
                'theme_location' => 'primary'
        );

        ?>

        <?php wp_nav_menu( $args ); ?>

    </nav>
  </header><!-- site header -->

这是我的CSS

    /*Navigation Menus*/
    .site-nav ul{
    margin: 0px;
    text-align: center;
    display:inline-block;
    float: right;
    width: auto;
    }

 .site-nav li{
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
  }


  .site-nav ul:before, .site-nav ul:after {
  content ""; display: table;
   }


   .site-nav ul:after {
   clear: both;
   }


   .site-nav ul li {
    list-style: none;
    float: right;
    text-align: center;
     }

    /* Site Header Menu */
    .site-header nav ul li a:link,
    .site-header nav ul li a:visited {
     display: block;
     padding: 10px 20px;
}

Answer 1

您可以使用 jquery 设置菜单垂直居中。使用这个逻辑

var a = jQuery(".site-header").height(); 
        var b = jQuery("nav").height(); 
        var c = (a-b)/2; 
        jQuery("nav").css("padding-top" , c );