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

#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

Answer 2

我最近遇到了这个问题，当我无法将该菜单置于中心位置时，我在Google上搜索了帮助，并找到了此页面。和你一样，我尝试了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; ，我的菜单栏居中。

我希望这可以帮助其他有这个问题的人！：）

Wordpress菜单项不想中心

2 个答案: