YIA主题导航菜单中的子菜单如何修改为居中显示？

boke112百科前面跟大家分享了『WordPress如何创建菜单及二级子菜单？怎么添加自定义菜单？』一文介绍如何创建菜单和子菜单。不过YIA主题前端导航菜单中的子菜单默认是居左显示，这样的话右侧留白的地方就比较多。具体如下图所示：

可能有些站长跟boke112百科一样，比较喜欢让子菜单居中显示，这样左右两侧的空白是一样的，看起来比较有平衡美。具体如下图所示：

那么我们应该如何做才能让YIA主题前端导航菜单中的子菜单居中显示呢？其实，我们只需要添加CSS代码即可解决。

方法一、在自定义代码中添加

进入WordPress站点后台 >> 点击“YIA主题设置”>> 点击切换到“自定义代码”，在“CSS代码”中添加以下代码，并点击【保存】按钮即可。

.yia-top-menu>li>.sub-menu{text-align: center;}
@media(max-width: 890px){.yia-top-menu>li>.sub-menu{text-align: left;}}

上述第1行代码是让PC端的子菜单居中显示；第2行代码是让移动端的子菜单居左显示，要不然也居中显示的话会不太好看，因为移动端菜单面板是100%宽度，居中显示的话离一级菜单太远了。

方法二、直接修改style.css文件

在/wp-content/themes/yia/文件夹中找到并打开style.css文件，搜索找到第一个“.yia-top-menu>li>.sub-menu”，并在其{}内添加以下代码：

text-align: center;

变成：

.yia-top-menu>li>.sub-menu{text-align:center;left:50%;top:60px;transform:translateX(-50%);border-left:none;transition:top .3s}

找到第二个“.yia-top-menu>li>.sub-menu”，并在其{}内添加以下代码：

text-align: left;

变成：

.yia-top-menu>li>.sub-menu{text-align:left;left:auto;top:auto;transform:translateX(0);transition:none}

最后保存文件，刷新缓存即可看到PC端导航菜单中的子菜单居中显示了。具体效果请看boke112百科导航菜单。

本文地址：https://boke112.com/post/11823.html