无法使我的主导航居中.始终保持在左侧.(CSS)

Question

我无法将列表项置于中心位置。这是代码。

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h1 class="menu-toggle">Menu</h1>
        <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
        <div class="menu-main-navigation-container">
              <ul id="menu-main-navigation" class="menu nav-menu">
                  <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-12"><a href="#">Home</a></li>
                  <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="#">Music</a></li>
                  <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="#">Video</a></li>
                  <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="#">Media Package</a></li>
                  </ul>
        </div>      
    </nav>

这是CSS文件。

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

如果有人也能简要解释为什么会出现这个问题，那将对帮助我和其他人有很大帮助。

Answer 1

由于您已经在父级（.main-navigation）上设置了text-align:center，只需添加：

.menu-main-navigation-container {
    display: inline-block;
}

并将.main-navigation a从display:inline-block更改为display:block

.main-navigation a {
    display: block;
}

jsFiddle 示例 - 它居中。

或者，您可以在 .main-navigation 上设置定义的宽度，并添加margin:0px auto以使ul居中。此解决方案不一定适用于动态生成的内容，因为需要硬编码宽度，但尽管如此，这两种解决方案都可以在您的情况下使用。