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

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

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

CSS

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

请看下面的片段:

.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; 
}

<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>