如何居中对齐菜单项？引导

这是代码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>

来源

2015-04-01 Sz. Erika

当我进入您的网站时，您的菜单已位于中心。 – anson920520 2015-04-02 01:56:49

对不起...现在看看网站。 – 2015-04-02 08:21:55

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

电流：

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

Propsed：

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

之后的工作：

来源

2015-04-02 08:30:13 Gereltod

进行得非常好，你说什么，但我找不到我可以支持这种变化 – 2015-04-02 08:45:22

类的主菜单是由一个PHP代码生成。我编辑了代码，看看它的样子 – 2015-04-02 08:46:07

我没有你的PHP文件。所以我不能告诉你在哪里编辑。你应该以某种方式找到它:)如果你使用良好的IDE，编辑器必须有易于查找线条的功能。 – Gereltod 2015-04-02 08:50:24

如果你想芯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; 
}

来源

2015-04-05 12:38:21

完美答案。谢谢 – 2017-05-16 11:09:40

如何居中对齐菜单项？引导

回答

相关问题