如何居中WordPress导航栏？已尝试方案无效，求最优解决方法

嘿，我太懂那种试了网上的方案却完全没效果的挫败感了——WordPress不同主题的导航结构差异真的很大，之前的方法可能刚好不匹配你的主题。下面是几种通用且大概率能解决问题的方法，你可以挨个尝试：

方法一：自定义CSS（最通用的解决方案） #

这是最常用的方式，根据你的导航布局类型选择对应的代码：

• 针对Flex布局的现代主题
  很多近年更新的WordPress主题默认用Flex布局来做导航，直接给导航容器添加以下CSS即可：

.main-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}

把这段代码加到外观 > 自定义 > 额外CSS里保存就行，它会让导航项水平居中，同时垂直方向也对齐，适配性很强。

• 针对传统ul/li块级布局的主题
  如果你的导航是用经典的列表结构，试试这段代码：

.main-navigation ul {
  text-align: center;
  margin: 0 auto;
}
.main-navigation ul li {
  display: inline-block;
  float: none; /* 清除主题自带的浮动干扰 */
}

原理是先让列表容器的文本居中，再把列表项改成行内块元素，这样它们就会在容器内水平排列并居中。

• 解决CSS优先级问题
  如果加了上面的代码还是没效果，大概率是主题自带的CSS优先级更高，你可以给选择器加更高权重，或者临时用!important（尽量少用，之后最好找到主题对应的具体选择器替换）：

body .main-navigation {
  justify-content: center !important;
}

方法二：用主题自带的自定义选项 #

很多主流WordPress主题都自带导航对齐的可视化设置，完全不用写代码：

1. 进入WordPress后台的外观 > 自定义
2. 找到「菜单」「布局」或者「导航」相关的选项卡
3. 看看有没有「导航对齐方式」的下拉选择，直接选「居中」保存即可——这是最省心的方法！

方法三：排除干扰因素 #

• 清除浏览器缓存：很多时候你修改了CSS但没生效，只是浏览器还在加载旧的缓存，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面试试。
• 检查导航容器类名：如果上面的代码里.main-navigation不对，你可以按F12打开浏览器开发者工具，选中导航栏元素，查看它的父容器类名（比如有些主题是.nav-menu或.site-navigation），把代码里的类名替换成对应的就行。

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