如何使店面菜单居中？

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但是没有任何弹性箱规则可以在任何地方使用！做一些如此简单的事情真令人困惑。

Answer 1

你正在过度思考他们的风格选择。你可以试试这个：

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

它的工作原理是去除有限的宽度，以及使“推车”碰到更多的余量。现在它是全宽的，你可以将文本居中：