中心菜单项

Question

我目前正在Wordpress上本地开发一个网站，并使用了主题菜单，我似乎无法弄清楚如何将菜单项置于中心位置，它们目前位于左侧。代码取自主题，但我创建了一个子主题。疯狂试图弄清楚这一点，我可能没有做过一些非常简单的事情，任何帮助表示赞赏！感谢

这是来自header.php：

<!-- Header -->
    <header id="header" class="cf">
        <div class="in">
            <section class="logo-box <?php echo ( is_active_sidebar( 'header-call-to-action-sidebar' ) ) ? 'logo-box-header-cta': 'logo-box-no-header-cta'; ?> <?php echo ( ! is_active_sidebar( 'header-call-to-action-sidebar' ) && ! has_nav_menu( 'top_nav' ) ) ? 'logo-box-full-width': false; ?>">
                <?php sds_logo(); ?>
                <?php sds_tagline(); ?>
            </section>

            <aside class="header-widget-container <?php echo ( ! is_active_sidebar( 'header-call-to-action-sidebar' ) && ! has_nav_menu( 'top_nav' ) ) ? 'header-widget-container-no-margin': false; ?>">
                <?php if( has_nav_menu( 'top_nav' ) ) : // Top Navigation Area ?>
                    <nav class="top-nav">
                        <?php
                            wp_nav_menu( array(
                                'theme_location' => 'top_nav',
                                'container' => false,
                                'menu_class' => 'top-nav secondary-nav menu',
                                'menu_id' => 'top-nav'
                            ) );
                        ?>
                    </nav>
                    <section class="clear"></section>
                <?php endif; ?>

                <?php if ( is_active_sidebar( 'header-call-to-action-sidebar' ) ) : ?>
                    <section class="header-cta-container header-call-to-action">
                        <?php sds_header_call_to_action_sidebar(); // Header CTA Sidebar ?>
                    </section>
                <?php endif; ?>
            </aside>
        </div>

        <!-- main nav   -->
        <nav class="primary-nav-container">
            <div class="in">
                <?php


                    wp_nav_menu( array(
                        'theme_location' => 'primary_nav',
                        'container' => false,
                        'menu_class' => 'primary-nav menu',
                        'menu_id' => 'primary-nav',
                        'fallback_cb' => 'sds_primary_menu_fallback'
                    ) );
                ?>
            </div>

            <button class="mobile-nav-button">
                <img src="<?php echo get_template_directory_uri(); ?>/images/menu-icon-large.png" alt="<?php esc_attr_e( 'Toggle Navigation', 'socialize' ); ?>" />
                <img class="close-icon" src="<?php echo get_template_directory_uri(); ?>/images/close-icon-large.png" alt="<?php esc_attr_e( 'Close Navigation', 'socialize' ); ?>" />
                <?php _e( 'Navigation', 'socialize' ); ?>
            </button>
            <?php soc_mobile_menu(); ?>
        </nav>
    </header>

这是来自style.css：

nav.primary-nav-container {
    position: relative;
    z-index: 5;
    background: #ffffff;
    width: 100%;
    float: left;
    margin-top: 20px;
    border-top: 1px solid #8d7249;
    text-align:center;
}

nav .primary-nav{
    width: 100%;
    display: inline-block;
    clear: both;
    position: relative;
    float: left;
    margin: 0 auto;
}

nav .primary-nav li{
    float: left;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-right: 1px solid #8D7249;
}

nav .primary-nav li a{
    float: left;
    text-decoration: none;
    color: #8D7249;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 25px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-right: 0.5px solid #8D7249;
    border-bottom: 0.5px solid #8D7249;
    border-top: 0.5px solid #8D7249;
}

nav .primary-nav li:first-child a{
    border-left: 1px solid #8D7249;
}

nav .primary-nav li a:hover{
    background: #F5D0c5;
}

li.current_page_item {
    background: #F5D0c5;
}

nav .primary-nav li ul.sub-menu, nav .primary-nav li ul.children {
    width: auto;
    position: absolute;
    top: 100%;
    display: none;
    background: #ffffff;
    z-index: 999;
}

/* Third Level */
nav .primary-nav li ul.sub-menu li ul.sub-menu, nav .primary-nav li ul.children li ul.children {
    top: 0;
    left: 100%;
}

nav .primary-nav li ul.sub-menu li ul.sub-menu li, nav .primary-nav li ul.children li ul.children li {
    float: left;
}

nav .primary-nav li ul.sub-menu li, nav .primary-nav li ul.children li {
    width: auto;
    min-height: 49px;
    float: none;
    display: block;
    position: relative;
}

nav .primary-nav li ul.sub-menu li a, nav .primary-nav li ul.children li a {
    width: auto;
    min-width: 12em;
    margin-bottom: -1px;
    padding: 15px 25px;
    border-bottom: 1px solid #8D7249;
    white-space: nowrap;
    float: none;
    display: block;
}

nav .primary-nav li ul.sub-menu li:last-child a, nav .primary-nav li ul.children li:last-child a {
    margin-bottom: 0;
    border-bottom: 1px solid #8D7249;
}

nav .primary-nav li:hover > ul.sub-menu, nav .primary-nav li:hover > ul.children {
    display: block;
}

nav .primary-nav li a:hover{
    background-color: #F5D0c5;
}

nav ul.primary-nav > li:hover{
    background-color: #F5D0c5;
}

nav ul.primary-nav > li:hover, nav .primary-nav ul > li:hover {
    background-color: #F5D0c5;
}

/* line 248l
*/

/* ------------------
           Navigation Button
        ---------------------  */
    .nav-button, .mobile-nav-button {
    background-color: #ffffff;
    background: url(images/menu-icon-large-brown.png) center center no-repeat;
    }

    .nav-button{
        background: url(images/menu-icon-large-brown.png);
        background-size: 20px;
        border: 1px solid #8d7249;
        font-size: 0;

    }

    .mobile-nav-button {
        width: 100%;
        height: 50px;
        position: relative;
        top: auto;
        left: auto;
        color: #8d7249;
        text-indent: 0;
        overflow: visible;
        line-height: 1.5em;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 2;
        outline-color:#8d7249;
    }

    .nav-button:hover, .mobile-nav-button:hover {
        background: url(images/menu-icon-large.png);
        background-size: 20px;
    }
    .mobile-nav-button:hover {
        background: #f5d0c5;
    }

    .nav-button.open, .mobile-nav-button.open {
        background-size: 20px;
    }
    .mobile-nav-button.open {
        background: #fff;
        color:#8d7249;
        position: relative;
        z-index: 5;
        border-top: 1px solid #8d7249;
        border-bottom: 1px solid #8d7249;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    nav .mobile-nav {
        height: auto;
        float: none;
        background: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        z-index: 2;
        border-bottom: 1px solid #aaa;
        box-shadow: 8px 0 6px -2px #000;
    }

    nav .mobile-nav li.menu-label {
        display:none;
    }

    nav ul.top-nav li a, nav .mobile-nav li a {
        display: block;
        width: 88%;
        padding: 10px 5%;
        font-size: 14px;
        color: #949494;
        text-decoration: none;
        border-bottom: 1px solid rgba(141, 114, 73, 1);
        border-top: 0px solid rgba(141, 114, 73, 1);
        -webkit-border-radius: 0;
        border-radius: 0;
    }
        nav .mobile-nav li a {
        width: 92%;
        color: #8d7249;
    }

    nav .mobile-nav li li {
        background: #ffffff;
    }

    nav .mobile-nav li li a {
        padding-left: 2.5em;
    }

    nav .mobile-nav li li a, nav .mobile-nav > li:hover a {
        color: #fff;
    }

    nav .mobile-nav > li:hover {
        background: #f5d0c5;
    }

Answer 1

你应该尝试这样 -

nav.primary-nav-container {
    position: relative;
    z-index: 5;
    background: #ffffff;
    width: 100%;
    float: left;
    margin-top: 20px;
    border-top: 1px solid #8d7249;
    /*text-align:center;*/
}

nav .primary-nav{
    width: 100%;
    display: inline-block;
    clear: both;
    position: relative;
    float: left;
    margin: 0 auto;
    text-align:center;
}

nav .primary-nav li{
    /*float: left;*/
    display:inline-block;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-right: 1px solid #8D7249;
}

nav .primary-nav li a{
    /*float: left;*/
    text-decoration: none;
    color: #8D7249;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 25px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-right: 0.5px solid #8D7249;
    border-bottom: 0.5px solid #8D7249;
    border-top: 0.5px solid #8D7249;
}

我希望我能帮到你。