css - 无法居中我的主导航。永远留在左边。 (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 example - 它居中。

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