Question

我有以下菜单结构：

<div class="header" style="height: 150px;">
    <nav id="main-nav">
        <div class="menu-main-menu-container">
            <ul id="menu">
                <li>menu item 1</li>
                <li>menu item 2</li>
            </ul>
        </div>
        <div class="clear"></div>
    </nav>
</div>

此案例中的容器#main-nav具有真实height: 20px;（因此.menu-main-menu-container也拥有它）。但是当我尝试使用以下方法在.header中垂直定位整个菜单时：

#main-nav {
    bottom: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

#main-nav立即获得.header的高度！所以，它是height: 150px;（根据Firebug），我无法垂直定位它。

我如何垂直定位？那是我经常偶然发现的错误。当我添加top：0;和底部：0;它获取父容器的高度。我不知道该菜单的高度。

Answer 1

当父母的身高未知且孩子的身高已知时的情况：设置top: 50%和margin-top: -10px（10px =导航高度的一半）。演示http://dabblet.com/gist/2819055

父母和孩子的身高都未知的情况：使用height: 100%的伪元素; display: inline＆amp;伪元素和子元素上的vertical-align: middle（在本例中为nav） - 演示http://dabblet.com/gist/2819071

Answer 2

我认为你的意思是水平居中。在这种情况下，如果您的身高仅为CSS未知，则无法执行此操作。你可以使用jQuery。看看this小提琴。

它会计算菜单的高度，然后计算它的位置。

CSS垂直定位，没有高度已知

2 个答案: