html - 无法使用 Bootstrap 解决方案使不使用导航栏类的菜单居中

Question

注意:您可以在以下位置看到格式正确的菜单文本与移位的菜单文本的图像:http://i.imgur.com/ubBbQB4.png

第二次编辑:注意从原始页面添加的页面源代码。这个问题的 HTML 最初是针对 Header.php 文件的。第二次 EDIT HTML 来自页面源代码，在进行建议更改之前——最值得注意的是，“span3”和“logo”div 已从 header HTML 中删除，因为它们阻止了菜单向左移动。我在一个没有答案的早期问题中发布了这段代码。

希望这可能有助于找出为什么子菜单文本不会出现在框中。谢谢。

<header style="opacity: 1; margin-top: 0px; ">
<div class="container">
    <div class="row">

    <div class="span3">
    <div id="logo">
            <a href="SITE URL">

                                    </a>
    </div>
    </div>

    <div class="span9">
        <!-- Mobile Menu -->
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>

        <!-- Standard Menu -->
        <div id="menu">
            <ul id="menu-nav" class="sf-js-enabled">
            <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-14"><a href="SITE URL">Home<mark class="bar"></mark></a></li>
<li id="menu-item-266" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-266"><a href="SITE URL?page_id=252">About<mark class="bar"></mark></a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="SITE URL?page_id=11">Blog<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198"><a href="SITE URL?page_id=196">SITE NAME<mark class="bar"></mark></a>
<ul class="sub-menu sf-js-enabled" style="float: none; width: 20em; display: none; visibility: hidden; ">
<li id="menu-item-569" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-569" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-565" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-565" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-454" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a href="SITE URL?page_id=257">Contact<mark class="bar"></mark></a></li>

            </ul>
        </div>
    </div>

    </div>
</div>

编辑:

@davidpauljunior 感谢您的快速帮助。不幸的是，在尝试了几次之后，它对我没有用。我想我知道为什么它对我不起作用。我从主题的头文件中输入了标记，但我从 TB CSS 上传了 CSS 而不是主题的 CSS，主题的 CSS 本身很可能已经进行了调整。如果你能原谅这个错误，我将在下面再次破解它。我会在评论中这样做，但它不允许这么长的代码。注意标记为编辑的部分。希望我没有浪费任何善意。谢谢。

––––––––––––––––––––

我有一个基于 Twitter Bootstrap 的 WP 主题，主题的作者没有使用菜单的导航栏类。相反，它只使用标题和#menu 以及导航的细微变化。我的问题是标准菜单由两部分组成:左侧的 Logo 和右侧的菜单，右对齐。

我没有使用 Logo ，所以我希望菜单水平居中。我已经尝试了很多在这里找到的居中方法，但都没有用。我认为这可能与主题使用“span3”作为 Logo 这一事实有关。我去了 header.php 文件并将其编辑掉。菜单现在一直移动到 Logo 位置的左对齐位置。这是进步，但我仍然没有找到将 Logo 居中放置在顶部的方法。我已经尝试应用许多用于“导航栏”的居中代码位，但没有一个可以解决问题。

这是我删除 Logo div 后的页眉 php 标记。

<!-- Header -->
<header>
    <div class="container" style="width: 100%;">
        <div class="row">



        <div class="span9"  style="width: 100%; text-align: center;">
            <!-- Mobile Menu -->
            <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>

            <!-- Standard Menu -->
            <div id="menu">
                <ul id="menu-nav">
                <?php 
                    if(has_nav_menu('primary_menu')) {
                    wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s', 'link_after' => '<mark class="bar"></mark>' ) ); 
                    }
                    else {
                    echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>  
                </ul>
            </div>
        </div>

        </div>
    </div>
</header>
<!-- End Header -->

<!-- Mobile Navigation Mobile Menu -->
<div id="navigation-mobile">
    <div class="container">
        <div class="row">
            <div class="span12">
                <ul id="menu-nav-mobile">
                <?php 
                    if(has_nav_menu('primary_menu')) {
                    wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
                    }
                    else {
                    echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>  
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- End Navigation Mobile Menu --> 

菜单的其余部分在“span9”类下——我试图看看将其更改为“span12”是否有帮助，但没有任何效果。我对此很陌生，但我正在努力理解。我应该在 header.php 和 CSS 样式文件中这样做吗？或者这一切都可以在头文件中的标记中或仅在 CSS 自定义中完成吗？

编辑:这是标题的 CSS 样式表部分 [编辑-来自主题本身]:

/* Navigation */

#menu {
    float: right;
}

/* Sub-Menu */

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    position: relative;
    float: left;
    margin: 0 15px;
    line-height: 160px;
    z-index: 40;
}

#menu ul li:last-child {
    margin-right: 0;
}

#menu ul a {
    position: relative;
    display: block;
    color: #B2B2B6;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

#menu ul li:hover { visibility: inherit; }

#menu ul ul {
    position: absolute;
    top: -9999em;
    width: 220px !important;
}

#menu ul ul li {
    width: 100%;
}

#menu ul ul li .bar {
    display: none;
}

#menu ul li:hover ul,
#menu ul li.sfHover ul {
    top: 160px;
    left: -20px;
    z-index: 99;
}

#menu ul a:hover,
#menu ul li.sfHover a,
#menu > ul li.current-cat a,
#menu > ul li.current_page_item a,
#menu > ul li.current-menu-item a,
#menu ul li.current-page-ancestor a,
#menu ul li.current-menu-ancestor a {
    color: #56646F;
}

#menu ul li a .bar {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 6px;
    background: #F88A79;
    opacity: 0;
    -webkit-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    -moz-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    -o-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
}

编辑:这是我对菜单的自定义，以我想要的方式设计它的样式——一切都以这种方式运行和看起来都很好，只是它没有居中。 (抱歉，我不知道展示所有这些的最佳方式——我希望我没有因为没有正确发布而违反这里的一些礼节):

#menu {
width: 100%;
float: left;
margin: 0 auto;
}

#menu-nav {
text-align: center;
}

#menu menu-nav ul  {
    float:none;
    display:inline-block;
    text-align: center;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

#menu ul { 
display:inline-block; 
}

#menu ul { 
display:inline; 
zoom:1;
}

#menu ul li a .bar {
height: 50px;
}

#menu ul li.sfHover ul {
    top: 100px;
    left: -20px;
    z-index: 99;
}


#menu-nav{
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
}



#menu ul a {
    position: relative;
    display: block;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

#menu ul .sub-menu li a {
    color: #989898;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 5px 20px;

    -webkit-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    -moz-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    -o-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
}

我希望有人能对此有所启发。几个星期以来，我一直在努力让它发挥作用。提前谢谢了。

Answer 1

随着这个问题的发展和发展，我选择添加另一个答案。

这里的第一个问题是您的 HTML 不正确。有一个额外的 <li>和 <ul>在那里。我在底部的演示中将它们注释掉了。

其次，围绕样式存在很多混淆。您也有选择器错误，例如 #menu menu-nav ul (缺少 . )。

我认为主题是无法触及的，目的是用您自己的主题定制覆盖它。既然如此:

1. 删除所有内联样式，这是不好的做法。
2. 根据下面演示中的 CSS 更改您的样式。

http://jsbin.com/UVaZUki/1/edit