标题中的居中菜单[重复]答案

【问题标题】：Centering menu in header [duplicate]标题中的居中菜单[重复]
【发布时间】：2014-05-21 05:21:02
【问题描述】：

如何在标题中居中菜单/导航？

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;

谢谢！

【问题讨论】：

"因为你使用的是浮点数，唯一的居中方法是对包含的元素应用一个宽度并使用 margin-left: auto; margin-right: auto。没有这样做的方法将保留灵活的宽度。浮动的替代方法是 display:inline-block; 这些可以使用 text-align:center 居中，但你必须重新设计 css。" - 来自=> stackoverflow.com/a/6550977

标签： php html css

【解决方案1】：

有几种方法。这里有两个。

在.main-menu 上设置一个非100% 的宽度，然后添加margin: 0 auto
从.main-menu ul li 中删除浮动，添加display: inline-block 并将text-align: center 添加到.main-menu

【讨论】：