html - 如何将店面菜单居中？

Question

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

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

我尝试了很多不同的组合，但我无法理解 WooCommerce/店面 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;
    }
}

它的工作原理是消除有限的宽度，以及将“购物车”撞得更多的边距。现在它是全宽的，您可以将文本居中：