Horizontal menu-bar with centered vertical alignment and 100% height

Question

I am looking to get my everything on my menu bar vertically aligned in the center, with the a elements taking up 100% of the available height of the menubar (text would be veritcally-centered). HOWEVER, I do not wish to fix the height of my menu bar. (If I was to fix the height, I'd just use line-height for vertical alignment).

HTML:

<div id="head">
    <h1>My header</h1>
    <ul id="nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

CSS:

#head {
    background: #ccc;
    width: 100%;
}

h1 { margin: 0; }
h1, #nav, #nav li { display: inline-block; }
#nav a:hover { background: red; }

JsFiddle: http://jsfiddle.net/m3qGs/

The effect I am trying to achieve is like the menu bar from JsFiddle but without the height being fixed. I'd prefer to do this in just CSS (ie no Javascript)

Answer 1

Add vertical-align:middle in the following class.

 h1, #nav, #nav li { display: inline-block; vertical-align:middle; }

DEMO

Answer 2

Add vertical-align:middle; to your inline-block elements, this will overwrite the default baseline vertical-align

Code:

h1, #nav, #nav li { display: inline-block; vertical-align:middle;}

jsfiddle demo here link