Question

我想让class="children"居中在页面容器的中间，最好只使用css，但如果不可能，你可以提供最好的js答案。目前它只是一个正常的下拉，但我想用它作为一个大型菜单。如果我必须添加另一个很好的div结构。

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

我已经看到了其他一些例子，但尝试了一些，但没有一个以中心为中心。我想找到一种动态方法，无论菜单中链接的位置如何，它总是将菜单集中在容器中。

enter image description here

编辑：这里找不到小提琴http://jsfiddle.net/YzJ4h/

Answer 1

最简单的方法是添加此CSS以横向居中您的大型菜单项：

CSS：

#menu li, .second-menu li {
    display:inline-block;
    position:relative;
}
#menu > li.mega_width {
    display:inline-block;
    position:static;
}
#menu > li.mega_width > .children {
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:auto;
}

<强> DEMO

Answer 2

对代码进行一些小改动：

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown" style="margin: auto;">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

Answer 3

给它外部div的宽度为50％并设置margin：0 auto;

style="margin:0 auto;"

Answer 4

<div class="main-navigation-wrapper">
<div class="nav pull-left">
    <div class="menu-main-menu-container">
        <ul id="menu" class="menu no-dropdown" style="margin: auto;">
            <li class="menu-item four">
                <a href="#">Blog</a>
                <div class="children">
                    --- Children items are here
                </div>
             </li>
         </ul>
     </div>
</div>

Answer 5

以下是您正在寻找的一个粗略示例： http://jsfiddle.net/m8Vj4/

一些主要提示：

position:absolute; / position:relative;

position:absolute将相对于其最近的父position:relative定位一些内容。在您的情况下，您将.children元素相对于其父li定位，而想要它们相对于.main-navigation-wrapper
使用display:inline-block;
对元素进行居中
您可以通过添加display:block将元素置于margin:0 auto的中心位置，但这对于display:inline-block的元素不起作用。相反，您可以在其父级上设置text-align:center，在自己上设置text-align:left，这样他们就不会继承居中的文字。

希望有帮助...重新编写现有的HTML / CSS会花费太多时间。

Answer 6

我冒昧并在现有代码中添加了一些CSS。那些是 -

.main-navigation-wrapper{width: 1140px; margin: 0 auto; background: #E5F0FF;}
#menu{text-align:center; padding:0px; position:relative;}

#menu li.mega-three.fullwidth{position:static;}
#menu .mega-three div.children{left:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}

这是fiddle。

希望它对你有用。： - ）

Answer 7

您可以在代码中进行某些修改。为了避免儿童div中的滚动条，你必须使用width：auto和一些位置设置。请检查以下代码。它可能对你有帮助。

.menu-main-menu-container ul#menu .children {
    left: 0;
    position: absolute;
    width: auto;
}

.menu-main-menu-container ul#menu .children:hover {
    visibility: visible;
}

.menu.no-dropdown {
    position: relative;
    position:static;
}

修改课程

#menu li, .second-menu li{
    position:static;
}

对于子div中的内部子菜单，

.menu-main-menu-container ul#menu .children .children {
    position: relative;
}

你可以请小提琴检查

http://jsfiddle.net/YzJ4h/4/

动态中心下拉主菜单

7 个答案: