2

私は次のメニュー構造を持っています：

<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によると）それであり、私はそれを垂直に配置することはできません。

それを垂直に配置するにはどうすればよいですか？それは私が頻繁に遭遇するバグです。トップを追加すると：0; 下：0; 親コンテナの高さを取得します。そのメニューの高さはわかりません。

4

2 に答える 2

4

親の身長が不明で、子の身長がわかっている状況：設定top: 50%してmargin-top: -10px（10px=ナビゲーションの高さの半分）。デモhttp://dabblet.com/gist/2819055

height: 100%親と子の両方の高さが不明な状況： ;の疑似要素を使用します。display: inline＆vertical-align: middle疑似要素と子の両方（この場合はnav）-デモhttp://dabblet.com/gist/2819071

于 2012-05-28T13:00:07.593 に答える
-1

横中央という意味だと思います。その場合、CSSだけで身長がわからない場合は、それを行うことはできません。ただし、そのためにjQueryを使用できます。このフィドルを見てください。

メニューの高さを計算してから、メニューを配置する必要がある場所を計算します。

于 2012-05-28T12:57:49.353 に答える