如何居中Storefront主题的店铺前台菜单？

我太懂你这种困惑了——Storefront的头部布局CSS确实有点绕，尤其是删掉购物车这个默认元素后，原来的布局逻辑就被打破了。别着急，我给你几个针对性的解决方案，一步步来：

核心CSS修复方案 #

先试试这个最直接的代码，把它加到你的自定义CSS里（子主题style.css或者主题自定义的“额外CSS”面板都可以）：

/* 让主菜单在头部容器里居中 */
.site-header .main-navigation {
  margin-left: auto;
  margin-right: auto;
}

/* 确保菜单内部的菜单项也居中对齐 */
.main-navigation ul.nav-menu {
  justify-content: center;
}

为什么这个能生效？ #

Storefront的头部默认用了Flex布局，原来的购物车(#site-header-cart)是和主菜单并列的Flex子项，它占着右侧空间时，菜单自然被挤在左边。删掉购物车后，主菜单变成了唯一的Flex子项，默认还是靠左对齐。设置margin-left: auto; margin-right: auto;相当于让Flex容器给菜单左右分配相等的空间，直接把它推到中间。

如果上面的代码没生效？试试这个进阶版 #

有时候头部容器的Flex对齐方式会限制菜单居中，这时候调整容器的属性：

/* 调整头部容器的对齐方式，让内容居中 */
.site-header .site-header-inner {
  justify-content: center;
}

/* 同时确保菜单本身的宽度不会撑满容器 */
.site-header .main-navigation {
  width: auto;
}

原来的.site-header-inner可能用了justify-content: space-between来分开logo、菜单和购物车，现在购物车没了，把它改成center就能让剩下的内容（这里就是菜单）直接居中。

小提醒 #

记得不要直接修改Storefront主题的原始CSS文件，不然主题更新后你的修改就没了。用子主题或者WordPress自带的“外观 > 自定义 > 额外CSS”来添加样式是最安全的方式。

内容的提问来源于stack exchange，提问作者Jethro Hazelhurst