如何在Joomla的Protostar模板中将主菜单居中对齐

嘿，刚好我对Joomla的Protostar模板熟得很，给你几个简单靠谱的方法来把主菜单项调整到页面居中：

方法一：用自定义CSS快速实现（最推荐） #

这是最直接的方式，不用动模板核心文件，安全又方便：

• 登录你的Joomla后台，依次点击「模板」→「模板管理」→「Protostar 细节」
• 切换到「高级」标签页，找到「自定义CSS」的输入框
• 把下面这段CSS代码粘贴进去，保存设置就行：

.navbar-nav {
    float: none !important;
    margin: 0 auto;
    display: table;
    table-layout: fixed;
}

原理很简单：display: table让菜单容器变成表格布局，margin: 0 auto就能自动居中，!important是为了覆盖模板默认的左浮动样式，确保新样式生效。

方法二：另一种CSS写法（适配不同场景） #

如果上面的代码没达到预期，可以试试这个方案，适配一些特殊的菜单结构：

.navbar .nav {
    text-align: center;
}
.navbar .nav > li {
    display: inline-block;
    float: none;
}

这个思路是先让菜单的父容器文本居中，再把每个菜单项改成行内块元素，取消默认的浮动，这样菜单项就会跟着容器的居中对齐排列。

小提示 #

如果改完后没看到效果，记得清一下Joomla后台的缓存（「系统」→「清除缓存」），或者刷新浏览器时按住Ctrl+F5强制刷新，避免缓存影响显示。

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