如何对齐菜单项？引导
我有这个网站：
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>
我是使用bootstrap技术的新手，想要了解如何将菜单项与中心对齐。
我阅读了Bootstrap文档，但遗憾的是我不太了解如何解决这个问题
如何解决问题？
提前致谢！
编辑：
<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>
2 个答案:
答案 0 :(得分：2)
如果您想将菜单 ul li 设为中心，则应使用CSS解决方案：
.nav-menu {
text-align: center;
}
.nav-menu li {
display: inline-block;
}
text-align：center; 您可以使用 display： 内联或内联块。 < / p>
如果您需要对齐项目 中的图片或文字。使用：
.nav-menu li {
display: inline-block;
text-align: center;
}
答案 1 :(得分：0)
在ul＃menu-menu上添加文本中心。
当前：
<ul id="menu-menu" class="nav-menu">
<强> Propsed：
<ul id="menu-menu" class="nav-menu text-center">
完成之后：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？