Question

如何将菜单/导航置于标题中心？

PHP文件看起来像这样

<div class="menu-and-contact-wrap">
    <?php
    $header_phone = get_option('theme_header_phone');
    if( !empty($header_phone) ){
        echo '<h2  class="contact-number"><i class="fa fa-phone"></i>'.$header_phone.' <span class="outer-strip"></span></h2>';
    }
    ?>

    <!-- Start Main Menu-->
    <nav class="main-menu">
        <?php
        wp_nav_menu( array(
            'theme_location' => 'main-menu',
            'menu_class' => 'clearfix'
        ));
        ?>
    </nav>
    <!-- End Main Menu -->
</div>

CSS文件看起来像这样

.menu-and-contact-wrap {
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}
.main-menu {
    margin-top: 42px;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}
.main-menu ul {
    list-style: none;
    margin: 0;
}
.main-menu ul li {
    float: left;
    position: relative;
}
.main-menu ul li.current-menu-ancestor > a, .main-menu ul li.current-menu-parent > a, .main-menu ul li.current-menu-item > a, .main-menu ul li.current_page_item > a, .main-menu ul li:hover > a {
    color: white;
    background-color: #ec894d;
}
.main-menu ul li a {
    font-family:"Lato", Helvetica, Arial, sans-serif;
    color: #afb4b5;
    font-size: 14px;
    display: block;
    text-decoration: none;
    padding: 14px 10px;
}
.main-menu ul li ul {
    display: none;
    background-color: #ec894d;
    width: 220px;
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    z-index: 888;
}
.main-menu ul li ul li {
    float: none;
    margin: 0;
}
.main-menu ul li ul li:hover > a {
    background-color: #dc7d44;
}
.main-menu ul li ul li a {
    font-size: 13px;
    padding: 10px 10px 12px;
    color: white;
}
.main-menu ul li ul li ul {
    background-color: #dc7d44;
    top: 0px;
    left: 220px;
}
.main-menu ul li ul li ul li:hover > a {
    background-color: #d0743d;
}
.main-menu .responsive-nav {
    display: none;
    margin: 0px auto;
    width: 100%;
    padding: 5px;
}

我尝试更改它们，正如您在CSS中看到的那样，但没有任何成功

默认情况下，它们看起来像这样：

Menu-and-contact-wrap看起来像这样

 position: absolute;
 bottom: 0;
 right: 0;

主菜单在

之前看起来像这样

 margin-top: 42px;
 float: right;

谢谢！

Answer 1

有几种方法。这是两个。

在.main-menu上设置非100％宽度，然后添加margin: 0 auto
从.main-menu ul li移除花车，向其添加display: inline-block并将text-align: center添加到.main-menu

标题中的中心菜单

1 个答案: