使用css在父级下方居中水平子菜单

Posted 2023-03-05

【中文标题】使用css在父级下方居中水平子菜单

【英文标题】：Centering horizontal submenu below parent with css

【发布时间】：2011-12-16 05:07:08

【问题描述】：

最好用小提琴显示：http://jsfiddle.net/Jnttm/

如何让子菜单在父菜单项下方居中？我发现的许多居中技巧都不适用，因为子元素比父元素宽。

这可以通过纯 CSS 实现还是我必须求助于 javascript？ 如果需要 JS，是否有人有方便的 JQuery 代码来执行此操作？

【参考方案1】：

您可能必须像这样为您的submenu 定义一个默认的width：

.sub-menu 
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    white-space: nowrap;
    text-align:center;
    left:50%;
    margin-left:-150px;
    width:300px;

.active .sub-menu 
    display:block;

查看http://jsfiddle.net/sandeep/Jnttm/1/

【讨论】：

投反对票的人请解释我哪里错了

不确定谁投了反对票，但这正是我所要求的。如果子菜单上有背景，它就行不通，因为它比内容更宽，但在我的情况下它是有效的。 （虽然现在我已经实现了它，但子项目的数量看起来不太正确，但这不是问题：p）

【参考方案2】：

这将使子菜单居中： ul > ul.sub-menu position: absolute; left: 50%; transform: translateX(-50%)