html - 如何使下拉菜单项居中？

我开始使用wordpress主题“ Pinnacle主题”并针对我的需求对其进行优化。但是现在我遇到了一个我无法解决的问题，希望有人可以在这里提供帮助。

我正在尝试将大菜单（更多列，然后是正常下拉菜单）居中到父项。

在我的Website "Wilde-NaTouren"上，菜单项“流浪+徒步旅行”是问题所在。

正常的“ .kt-lgmenu”通常是全角，但是我尝试通过以下代码给它一个固定的宽度

.kad-primary-nav .sf-menu>.kt-lgmenu>ul { width: 520px!important;}

现在我必须将.kt-lgmenu>ul居中为.sf-menu>.kt-lgmenu，但是我不知道如何。

这里有2张图片以查看它的外观以及我想要的内容（抱歉无法发布图片）。

Actual Situation->
Result

谢谢你的帮助

最佳答案

您已经有一个相对的li容器，这是第一步。下一步是使用transformX将隐藏的下拉列表水平居中：

.sf-dropdown-menu {
  …
  left: 50%;
  transform: translateX(-50%);
}

我在检查器中编辑了该站点并将其记录下来，以向您展示如何应用每个规则。



首先，应用left: 50%。然后，我们执行负翻译。 left引用父元素，而transform引用目标元素（实际隐藏的ul）。