如何使店面菜单居中？

Question

要复制我的问题，请转到此处的店面演示页面：https://demo.woothemes.com/storefront/ 并删除包含购物车框（在菜单右侧）的节点 <ul id="site-header-cart" class="site-header-cart menu"></ul>，以便主菜单是自己。

这是我卡住的地方，我不知道如何使菜单居中。

我尝试了很多不同的组合，但我就是不明白 WooCommerce/storefront css 是怎么回事。这对我来说毫无意义。

这是对我有用的...

.woocommerce-active .site-header .main-navigation {
    width: 100%;
}

#menu-primary-menu {
    display: table;
    margin: 0 auto;
}

但我不知道为什么它只适用于 display: table。我尝试使用 flexbox 但似乎没有任何 flexbox 规则适用于任何地方！做这么简单的事情真是令人困惑。

Answer 1

您对他们的风格选择想得太多了。您可以试试这个：

@media (min-width: 768px){
    .woocommerce-active .site-header .main-navigation {
        width: 100%;
        margin: 0;
        text-align: center;
    }
}

它的工作原理是移除有限的宽度，以及使 "cart" 超出一点的边距。现在它是全宽的，您可以将文本居中：

如何使店面菜单居中？

How do I Center the Storefront Menu?

html

css

wordpress

storefront