中心導航欄中有中心的徽章（徽標）

Question

我正在研究我的第一個WordPress主題（耶！），我正在學習很多關於php的知識。但是，我試圖將這個頂點居中放置在導航欄的中間，並且它不起作用。基本上我們有事情是這樣的：

PHP：

<nav id="site-navigation" class="main-navigation" role="navigation"> 
     <h1 class="menu-toggle"><?php _e('Menu', 'my'); ?></h1> 
     <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'my'); ?></a> 

     <?php wp_nav_menu(array('theme_location' => 'primary')); ?> 
    </nav><!-- #site-navigation --> 

HTML

<nav id="site-navigation" class="main-navigation" role="navigation"> 
<h1 class="menu-toggle">Menu</h1> 
<a class="skip-link screen-reader-text" href="#content">Skip to content</a> 

<div class="menu-left-menu-container"><ul id="menu-left-menu" class="menu"><li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4"><a href="http://">For Teachers</a></li> 
<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-5"><a href="http://?page_id=2">For Parents</a></li> 
<li id="menu-item-15" class="mycrest menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a title="Go Home" href="#">My Crest</a></li> 
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Recycle Your Devices</a></li> 
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">Our Team</a></li> 
</ul></div>  
</nav><!-- #site-navigation --> 
</header><!-- #masthead --> 

CSS：

.main-navigation ul { list-style: none; 
        margin: 0; 
        padding-left: 0; 
        text-align: center; } 
.main-navigation li { position: relative; 
        margin-right: 15px; 
        display: inline-block; 
        *display: inline; /*IE7*/ 
        *zoom: 1; /*IE7*/ } 
.main-navigation a { display: block; 
       text-decoration: none; } 
.main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
        display: none; 
        float: left; 
        left: 0; 
        position: absolute; 
        top: 1.5em; 
        z-index: 99999; } 
.main-navigation ul ul ul { left: 100%; 
         top: 0; } 
.main-navigation ul ul a { width: 200px } 
.main-navigation ul ul li { } 
.main-navigation li:hover > a { color: #00aeef } 
.main-navigation a:visited { color: #fff } 
.main-navigation ul li:hover > ul { display: block } 
.mycrest { 
background-image:url(assets/img/my_crest.png); 
background-repeat:no-repeat; 
width:199px; 
height:302px; 
font-size:0px; 
top:-130px; 
} 

#site-navigation { 
padding: 0px 15px 0px 15px; 
text-transform:uppercase; 
text-align:center; 
font-size:28px; 
color:#fff; 
font-family: 'Lato', sans-serif; 
height:40px; 
background-color:#602D90; 
border-top:1px solid #fff; 
} 

Answer 1

左邊空白處添加到波峯李項：margin-left: 96px; 。但是，一旦所有菜單項不能適應窗口寬度，它將移動，因此請確保您也照顧。