Wordpress 菜单项不想居中

Question

我有一些菜单项，无论我做什么都不想居中。我真的不确定我做错了什么。我觉得 PHP 拉菜单项可能是个问题（我不知道 PHP，它来自一个主题），因为当我手动添加我自己的 UL 菜单项时，它们会完美居中。

任何帮助将不胜感激！

PHP 文件代码

<div id="hmenubar">

    <?php $navcheck = '' ; ?>

    <?php $navcheck = wp_nav_menu( array(   'container_class' => 'menu-header', 
                        'theme_location' => 'primary' , 
                        'menu_class' => 'nav', 
                        'fallback_cb' => '', 
                        'echo' => false ) ); ?>
    <?php  if ($navcheck == '') { ?>

        <ul class="nav">            

            <?php wp_list_pages('title_li=&sort_column=menu_order'); ?>

        </ul>

    <?php } else echo($navcheck); ?>  

</div>  

CSS 代码

#hmenu_container {
height: 30%;
width:100%;
display: block;
text-align; center;
}

#hmenubar {
margin: 0 auto; 
}

#hmenubar ul {
font-family: 'Calligraffitti', cursive;
font-size: 1.5rem;
display: inline-block;
list-style: none;
margin: 0 auto;
}

编辑：列表的 HTML

<div class="menu-header">

<ul id="menu-photography" class="nav">

<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-15"><a href="/">Home</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="/blog/">Blog</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/about/">About</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="/gallery/">Gallery</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="/projects/">Projects</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="/insquares">Insquar.es</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="/instagram">Instagram</a></li>

</ul>
</div>  

Answer 1

我最近遇到了这个问题，当我无法让那个菜单居中时，我在谷歌上搜索帮助，找到了这个页面。像你一样，我尝试了 JSFiddle 的答案，但它不起作用，所以我开始分解这个特定代码中的所有内容。当我注意到这部分代码时，我终于让菜单栏居中了：

PHP 代码：

<?php $navcheck = wp_nav_menu( array(   'container_class' => 'menu-header', 
                    'theme_location' => 'primary' , 
                    'menu_class' => 'nav',
                    'fallback_cb' => '', 
                    'echo' => false ) ); ?>

具体来说：

                    'menu_class' => 'nav',

当我在 CSS 文件中查找 nav 时，我发现它位于我正在编辑的主题中名为 superfish.css 的文件中。我注意到这个文件包含两次基本相同的代码，一个标记为演示皮肤，有问题的代码如下：

CSS：

/*** DEMO SKIN ***/
.nav {
float:  left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}

很简单，我将 float: left; 更改为 float: center; 并且我的菜单栏居中。

我希望这可以帮助其他遇到此问题的人！ :)

Answer 2

#hmenu_container {
    height: 30%;
    width:100%;
}
#hmenubar {
    display: inline;
    text-align: center;
}
#hmenubar ul {
    font-family:'Calligraffitti', cursive;
    font-size: 1.5rem;
    display: inline-block;
    list-style: none;
}
#hmenubar li {
    display: inline;
}

JSFiddle