如何用CSS居中WordPress二级菜单栏及排查类名错误

一、类名错误的排查方法（用浏览器开发者工具） #

• 打开wildeones.com，右键点击二级菜单栏的任意位置，选择「检查」（Chrome/Edge）或「审查元素」（Firefox），打开开发者工具。
• 在Elements面板里，找到对应二级菜单的容器元素（一般是<nav>、<ul>或<div>标签），查看它的class属性值——这就是你需要用的正确类名。
• 可以通过鼠标hover在Elements面板的标签上，页面中对应的菜单会高亮，确认选中的是二级菜单的外层容器。

二、类名正确但CSS不生效的其他排查方向 #

如果确认类名没问题，还可能是这些原因：

• CSS优先级不够：现有样式的优先级比你写的高，比如用了ID选择器或者更具体的嵌套选择器。可以尝试提升权重，比如写成header .secondary-menu-class，或者临时加!important测试（不建议长期依赖）：

  .secondary-menu-class {
    text-align: center !important;
  }
  

• 容器不是块级元素：text-align: center只对块级元素内的行内/行内块元素生效，如果菜单容器是行内元素，先设置display: block：

  .secondary-menu-class {
    display: block;
    text-align: center;
  }
  

• 菜单用了浮动或flex布局：如果二级菜单的子元素设置了float，text-align不会起作用，这时改用flex布局更合适：

  .secondary-menu-class {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

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