vertical-align css3. tried everything else - html

Question

I am trying to vertically align the <a>'s inside my navigation divs, and it is for some reason not working. I've already checked that there are no other styles overriding my code, and several combinations of positioning.
<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;
}
any help would be appreciated.

Answer 1

Check it http://jsfiddle.net/mKbLW/1/
Changed around some of your values. Had some unneeded css rules.
#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;
}