I want to align everything on my menu bar vertically in the center, with the a elements taking up 100% of the available height of the menubar (text would be vertically-centered). However, I do not want to fix the height of my menu bar. (If I were to fix the height, I would 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/
I aim to achieve the same effect as the menu bar on JsFiddle, but without fixing the height. I would like to accomplish this using only CSS (no Javascript).