html - 我很难在其父 div 内垂直对齐 nav 元素。

Question

我尝试的每件事都会产生一个新问题。当我也使用 line-height: 属性时，它经常被推出。我怎样才能成功地将这个元素居中？

CSS:

#parent {
    background: #000; 
    background: rgba(0,0,0,0.50);
    width: 100%;
    height: 70px;
    position: fixed ;
    z-index: 9999;
}

#child {
    display: inline;
    text-align: center;
    float: right;
    margin-right: 30px; 
}

ul.menu2 {
    cursor: default;
    border-bottom: 0;
    margin-bottom: 0;
}

ul.menu2 li {
    display: inline-block;
    line-height: 1em;
    padding: 0 0 0 0.5em;
    margin: 0 0 0 0.5em;
}

HTML:

<div id="parent">
        <nav id="child" role="navigation">
            <ul class="menu2">
                <li><a href="#home" rel="home_link" class="scrolly">Home</a></li>
                <li><a href="#banner" rel="about_link" class="scrolly scrolly-centered">About</a></li>
                <li><a href="#first" rel="events_link" class="scrolly">Shows</a></li>
                <li><a href="#" rel="artists_link">Music</a></li>
                <li><a href="#" rel="contact_link">Contact</a></li>
            </ul>
        </nav>  
    </div>

Answer 1

如果你想使用line-height和inline-block来vertical-align，你不应该使用float。 text-align 就可以了。

可以用line-height设置nav的height，并在中间设置ul。

DEMO

#parent {
    background: #000; 
    background: rgba(0,0,0,0.50);
    width: 100%;
    top:0;
    left:0;
    text-align:right;/* ul will go right */
    line-height: 70px;/* as ul should stand on one line, it is enought to size height of nav */
    position: fixed ;
    z-index: 1;/* 1 should do it */
}

#child {
    display: inline-block;/* make me an inline-box, now i can hold anything, block, float, multi-lines, .. */
    text-align: center;/* reset text-align */
    margin-right: 30px; /* or padding-right, whatever */
    vertical-align:middle;/* set me on middle of line-height */
}

ul.menu2 {
    cursor: default;
    border : 0;
    margin : 0;/* usefull reset i believe :) */
    line-height:1.2em; /* reset line-height here to regular values :) in case text , inline-boxes split on 2 or more lines*/
}

ul.menu2 li {
    display: inline-block;
    padding: 0 0 0 0.5em;
    margin: 0 0 0 0.5em;
}