Centering a nav bar vertically

Question

I have a header with two elements in it. The first is an image that is a company logo and is set to 25% width. The other is a nav bar with its elements set inline so it is horizontal. I'd like for the navigation bar to be set vertically center but for the life of me cant figure it out. I've set everything I know to an element that can use vertical-align and put everything in display inline or table cell to apply it. Nothing works.

Keep in mind that the reason I don't just give it a static percentage padding or margin top is because as the page gets wider the image height expands as the width does so as you expand the browser horizontally the nav becomes more and more out of place.

I would greatly appreciate any help as I've tried ( much longer than i'd like to admit) on just centering an object vertically.

HTML cut down:

<div id="container">
<header id="header" role="banner">
    <img src="images" />
    <nav id="nav" role="navigation">
    <ul>
        <li><a href="#" title="About Us">About Us</a></li>
        <li><a href="#" title="Biographies">Biographies</a></li>
        <li><a href="#" title="Services">Services</a></li>
        <li><a href="#" title="Careers">Careers</a></li>
        <li><a href="#" title="Contact">Contact</a></li>
    </ul>
    </nav>
</header>

CSS cut down:

header img {
    height: auto;
    width: 25%;
    float: left;
    }

header nav {
    width: 75%;
    font-size: 1em;
    }

header nav li {
    display: inline-block;

    width: 19%;
    }

header nav li a {
    background: #2CB2E6;
    line-height: 

Heres a simple jsFiddle: http://jsfiddle.net/LbTCT/

Answer 1

Here's a fork of your original fiddle. You need to be setting inline-block on your logo and the nav element itself:

header img, header nav {
    display: inline-block;
    vertical-align: middle;
}

Rather than trying to float things.