WordPress网站导航栏居中设置：如何将两个左右对齐的菜单居中显示

架构老林

2026-10-3

WordPress双菜单居中无效解决方法

CSS不生效常见原因

你自行添加的CSS未生效通常是以下三类原因：

CSS选择器和站点实际菜单元素的类名/ID不匹配，样式没有命中目标元素
自定义样式优先级低于主题自带的默认样式，被原有样式覆盖
未清空站点缓存或浏览器缓存，修改后的样式没有被正常加载

具体操作步骤

1. 获取菜单元素的实际选择器

右键点击站点的菜单区域，选择「检查」打开浏览器开发者工具，找到包裹两个菜单的最外层父元素，以及左右两个菜单各自的类名或ID，常见主题中通常为.nav-wrapper、#site-navigation、.nav-left、.nav-right这类命名。

2. 添加高优先级自定义CSS

进入WordPress后台，依次点击「外观」-「自定义」-「额外CSS」，根据你查到的选择器替换下方示例代码中的占位内容后粘贴保存：

/* 适配flex布局主题，替换为你实际的菜单父容器选择器 */
.nav-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px; /* 调整两个菜单之间的间距，单位可换为rem */
}

/* 适配浮动布局的旧主题，如下代码可替换上面的flex代码使用 */
.nav-wrapper {
  text-align: center !important;
}
/* 替换为你实际的左右菜单选择器 */
.nav-left, .nav-right {
  float: none !important;
  display: inline-block !important;
  margin: 0 15px; /* 调整两个菜单之间的间距 */
}

代码中的!important用于强制覆盖主题自带样式，避免优先级不足导致不生效。