Question

有一个来自WordPress下划线的主题，我目前正在设计它。现在唯一的问题是，由于某些原因，我的jsfiddle显示菜单没有与中心对齐：https://jsfiddle.net/Wosley_Alarico/2zjpadys/1/

HTML：

<div id="content" class="site-content">
   <nav id="site-navigation" class="main-navigation" role="navigation">                                
       <div class="menu-menu-container">
          <ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
              <li id="menu-item-1753" 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-1753">
                   <a href="http://localhost/popperscores/">HOME</a>
              </li>
              <li id="menu-item-1757" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1757">
                   <a href="http://localhost/popperscores/page-b/">ABOUT US</a>
              </li>
              <li id="menu-item-1761" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1761">
                  <a href="http://localhost/popperscores/about/">OPPORTUNITY</a>
              </li>
              <li id="menu-item-1762" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1762">
                 <a href="http://localhost/popperscores/level-1/">CONTACT</a>
              </li>
           </ul>
       </div>       
    </nav>
</div>

CSS：

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
  text-align: center;
}
.main-navigation ul {
  display: block;
  list-style: none;
  margin: 0;
  padding-left: 0;
  text-align: center;
}
.main-navigation li {
  float: left;
  position: relative;
  text-align: center;
}
.main-navigation a {
  display: block;
  text-decoration: none;
  text-align:center;
  width:150px;
  text-decoration:none; 
}

所有人都期待对齐。如何在中心显示菜单？

Answer 1

从float: center移除.main-navigation li并声明display: inline-block会使导航的列表项居中。

<强> CSS

.main-navigation li {
  display: inline-block;
  position: relative;
  text-align: center;
}

请参阅下面的代码段：

＆＃13;

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
  text-align: center;
}
.main-navigation ul {
  display: block;
  list-style: none;
  margin: 0;
  padding-left: 0;
  text-align: center;
}
.main-navigation li {
  display: inline-block;
  position: relative;
  text-align: center;
}
.main-navigation a {
  display: block;
  text-decoration: none;
  text-align:center;
  width:150px;
  text-decoration:none; 
}

＆＃13;

<div id="content" class="site-content">
   <nav id="site-navigation" class="main-navigation" role="navigation">                                
       <div class="menu-menu-container">
          <ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
              <li id="menu-item-1753" 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-1753">
                   <a href="http://localhost/popperscores/">HOME</a>
              </li>
              <li id="menu-item-1757" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1757">
                   <a href="http://localhost/popperscores/page-b/">ABOUT US</a>
              </li>
              <li id="menu-item-1761" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1761">
                  <a href="http://localhost/popperscores/about/">OPPORTUNITY</a>
              </li>
              <li id="menu-item-1762" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1762">
                 <a href="http://localhost/popperscores/level-1/">CONTACT</a>
              </li>
           </ul>
       </div>       
    </nav>
</div>

＆＃13;

Answer 2

以上对我不起作用。在一个新鲜的下划线wordpress主题我做了：

.main-navigation ul {
display: block;
text-align: center; }

.main-navigation li {
float: none !important;
position: relative;
display: inline-block; }

如何使WordPress下划线菜单的导航栏内容居中

2 个答案: