vertical-align css3。嘗試一切

Question

我想垂直對齊我的導航divs中的<a>，這是由於某種原因不起作用。我已經檢查過沒有其他樣式覆蓋我的代碼，還有幾種定位組合。

<div id="logodiv"> 
    <figure> 
     <img id="logo" src="/images/Capture2.jpg" alt="logo" /> 
    </figure> 
    <nav id="flexbox"> 
     <div class="menudiv"><a class="menua" href="gallery.html">Gallery</a></div> 
     <div class="menudiv"><a class="menua" href="events.html">Events</a></div> 
     <div class="menudiv"><a class="menua" href="default.html">Home</a></div> 
     <div class="menudiv"><a class="menua" href="membership.html">Info</a></div> 
     <div class="menudiv"><a class="menua" href="contactus.html">Contact</a></div> 
    </nav> 
</div> 

CSS

#logodiv { 
    width:100%; 
    height:100px; 
    position:relative; 
    display:block; 

} 

#flexbox{ 
    background-color:#f5b00e; 
    float:right; 
    width:65%; 
    min-width:400px; 
    height:30px; 
    padding:0; 
    margin:0; 
    white-space:nowrap; 
    margin-bottom:0px; 
    position:absolute; 
    right:0px; 
    bottom:0px; 
    display:inline; 
} 

.menudiv{ 
    width:20%; 
    height:100%; 
    line-height:100%; 
    display:inline; 
    float:left; 
    margin:0 auto; 
    padding:0; 
    vertical-align:middle; 
    position:relative; 
} 

.menua{ 
    line-height:100%; 
    height:100%; 
    font-family: font, Arial, sans-serif; 
    font-size:15pt; 
    text-decoration:none; 
    text-shadow:none; 
    margin-top:10px; 
    vertical-align:bottom; 
} 

任何幫助，將不勝感激。

Answer 1

檢查http://jsfiddle.net/mKbLW/1/

改變周圍的一些你的價值觀。有一些不需要的CSS規則。

#logodiv { 
    width:100%; 
    height:100px; 
    position:relative; 
    display:block; 

} 

#flexbox{ 
    background-color:#f5b00e; 
    float:right; 
    width:65%; 
    min-width:400px; 
    height:30px; 
    padding:0; 
    margin:0; 
    white-space:nowrap; 
    margin-bottom:0px; 
    position:absolute; 
    right:0px; 
    bottom:0px; 
    display:inline; 
} 

.menudiv{ 
    width:20%; 
    height:100%; 
    float:left; 
    padding:0; 
    position:relative; 
} 

.menua { 
    height:100%; 
    line-height:30px; 
    display:inline; 
    font-family: font, Arial, sans-serif; 
    font-size:15pt; 
    text-decoration:none; 
    text-shadow:none; 
    margin-top:10px; 
}