注意：您可以在以下位置查看格式正确的菜单文本的图像与移位的菜单文本：http://i.imgur.com/ubBbQB4.png
第二次编辑： 注意从原始页面添加页面源代码。此问题的HTML最初是针对Header.php文件的。第二个EDIT HTML是在建议的更改之前来自页面源代码 - 最值得注意的是，“span3”和“logo”div已从标题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，这很可能已经被自己调整过了。如果你愿意原谅那个蠢货，我将在下面采取另一个裂缝。我会在评论中做到这一点，但它不允许这么长的代码。注意标记为EDIT的部分。希望我没有挥霍任何善意。谢谢。
----------------------
我有一个基于Twitter Bootstrap的WP主题，主题的作者没有使用导航栏类作为菜单。相反，它只是使用标题和#menu以及导航的轻微变化。我的问题是标准菜单由两部分组成：左侧是徽标，右侧是菜单，右侧对齐。
我没有使用徽标，所以我希望菜单水平居中。我已经尝试了几十件我在这里找到的东西，但是没有用。我认为这可能与主题使用“span3”作为徽标的事实有关。我去了header.php文件并将其编辑出来。菜单现在已经一直移动到徽标所在的左对齐位置。这是进步，但我仍然没有找到将徽标置于顶部中心的方法。我已经尝试将许多代码位应用于用于“导航栏”的居中，但没有一个可以解决问题。
这是我删除徽标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;
}
我希望有人可以对此有所了解。我已经尝试了几个星期才能让它发挥作用。提前谢谢了。
答案 0 :(得分：0)
将span9替换为span12并删除所有内嵌样式。
然后，这只是一些CSS调整。 添加：
#menu {
text-align: center;
}
然后在此处<{>>替换 float: left与display: inline-block：
#menu ul li {
position: relative;
/* float: left; REMOVE */
display: inline-block;
margin: 0 15px;
line-height: 160px;
z-index: 40;
}
删除这种last-child样式，它会稍稍偏离中心。
#menu ul li:last-child {
margin-right: 0;
}
注意：我只将第一个导航放入我的演示中。
编辑 - 有关更新的代码，请参阅以下演示。我已经粘贴了主题CSS，然后是你的CSS。我删除了很多东西，并添加了一些。您在<ul>上声明了90px的宽度，这是奇数，并且您的选择器#menu menu-nav无效 - 错过了.。
答案 1 :(得分：0)
按照这个问题的开发和发展方式，我选择了另外一个答案。
这里的第一个问题是您的HTML不正确。那里还有一个额外的<li>和<ul>。我在底部的演示中对它们进行了评论。
其次，围绕这些风格存在很多混乱。
选择器也有错误，例如#menu menu-nav ul（缺少.）。
我认为 主题是无法触及的内容，目的是用您自己的主题自定义覆盖 。情况就是这样：