title: vertical-alignment of inlined elements
body: <p>I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.</p>
  
  <p>I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.</p>
  
  <p>The basic structure is header -> header-content ->navigation > li > a
  All of the list items are set to display:inline.
  There's also a list item enclosed h1 element which has an enclosed image:  li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px. </p>
  
  <p>The header div sets the height of 4 ems and also a background color.  It's within these 4 ems that I need to vertically align the content of my navigation. </p>
  
  <p>I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)</p>
  
  <p>You can find a full code example of the problem here: <a href="http://pastebin.com/zcLspjJz" rel="nofollow">http://pastebin.com/zcLspjJz</a></p>
  
  <p>I need to support modern browsers and IE7 and upwards. But any ideas are welcome, really.</p>