如何居中對齊菜單項？引導

Question

我有這個網站：

http://avocat2.dac-proiect.ro/

這是代碼HTML：

<nav class="" role="navigation"> 
<!--   <div class="container-fluid">--> 
       <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <h1 class="site-title"><a href="http://avocat2.dac-proiect.ro/" rel="home">My Blog</a></h1> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 

       <!--   <form class="navbar-form navbar-left" role="search">--> 
       <!--    <div class="form-group">--> 
       <!--     <input type="text" class="form-control" placeholder="Search">--> 
       <!--    </div>--> 
       <!--    <button type="submit" class="btn btn-default">Submit</button>--> 
       <!--   </form>--> 

       <a class="screen-reader-text skip-link" href="#content">Skip to content</a> 
       <div class="menu-menu-container"><ul id="menu-menu" class="nav-menu"><li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://avocat2.dac-proiect.ro/?page_id=21" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><img width="60" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/CLIENTI.png" class="menu-image menu-image-title-hide" alt="CLIENTI"><img width="60" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/CLIENTI2.png" class="hovered-image menu-image-title-hide" alt="CLIENTI2" style="margin-left: -60px;"></span></a></li> 
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="http://avocat2.dac-proiect.ro/?page_id=2" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><img width="46" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/HOME.png" class="menu-image menu-image-title-hide" alt="HOME"><img width="46" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/HOME2.png" class="hovered-image menu-image-title-hide" alt="HOME2" style="margin-left: -46px;"></span></a></li> 
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://avocat2.dac-proiect.ro/?page_id=17" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><img width="67" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/AVOCATI.png" class="menu-image menu-image-title-hide" alt="AVOCATI"><img width="67" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/AVOCATI2.png" class="hovered-image menu-image-title-hide" alt="AVOCATI2" style="margin-left: -67px;"></span></a></li> 
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://avocat2.dac-proiect.ro/?page_id=19" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><img width="186" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/DOMENII-DE-EXPERTIZA.png" class="menu-image menu-image-title-hide" alt="DOMENII-DE-EXPERTIZA"><img width="186" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/DOMENII-DE-EXPERTIZA2.png" class="hovered-image menu-image-title-hide" alt="DOMENII-DE-EXPERTIZA2" style="margin-left: -186px;"></span></a></li> 
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://avocat2.dac-proiect.ro/?page_id=23" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><img width="78" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/ONORARII.png" class="menu-image menu-image-title-hide" alt="ONORARII"><img width="78" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/ONORARII2.png" class="hovered-image menu-image-title-hide" alt="ONORARII2" style="margin-left: -78px;"></span></a></li> 
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://avocat2.dac-proiect.ro/?page_id=25" class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"><img width="75" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/CONTACT.png" class="menu-image menu-image-title-hide" alt="CONTACT"><img width="75" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/CONTACT1.png" class="hovered-image menu-image-title-hide" alt="CONTACT" style="margin-left: -75px;"></span></a></li> 
</ul></div>   </div><!-- /.navbar-collapse --> 
<!--   </div>--> 
    <!-- /.container-fluid --> 
     </nav> 

我是新來使用引導技術並希望瞭解如何使菜單項的中心。

我讀的引導文件，但遺憾的是我並沒有很明白如何解決這個問題

如何解決這一問題？

在此先感謝！

編輯：

<header id="masthead" class="navbar navbar-default" role="banner"> 
    <div class="container"> 
     <nav class="" role="navigation"> 
<!--   <div class="container-fluid">--> 
       <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 

       <!--   <form class="navbar-form navbar-left" role="search">--> 
       <!--    <div class="form-group">--> 
       <!--     <input type="text" class="form-control" placeholder="Search">--> 
       <!--    </div>--> 
       <!--    <button type="submit" class="btn btn-default">Submit</button>--> 
       <!--   </form>--> 

       <a class="screen-reader-text skip-link" href="#content"><?php _e('Skip to content', 'zdwpbs'); ?></a> 
       <?php 
       wp_nav_menu(array('theme_location' => 'primary' , 
            'menu_class' => 'nav-menu')); 
       ?> 
      </div><!-- /.navbar-collapse --> 
<!--   </div>--> 
    <!-- /.container-fluid --> 
     </nav> 
    </div><!-- .container --> 
</header> 

我嘗試這樣做：

<script> 
    $('.main-menu').addClass('nav-menu text-center'); 
</script> 

Answer 1

添加文本中心的UL＃菜單菜單上。

電流：

<ul id="menu-menu" class="nav-menu"> 

Propsed：

<ul id="menu-menu" class="nav-menu text-center"> 

之後的工作：

Answer 2

如果你想芯Y我們的菜單UL李商品，則應該使用CSS的解決方案：

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

.nav-menu li { 
    display: inline-block; 
} 

文本對齊：中心;你可以使用display：inline or inline-block。

如果您需要對齊圖像或文字，您的li項目也是。使用：

.nav-menu li { 
    display: inline-block; 
    text-align: center; 
}