title: How to vertical align links in a div that contains an image?
body: <p>I'm trying to make a navbar on my site that contains 5 links, but one of them is an image that is in the middle of the group. You can look at the JSFiddle of what I have here: <a href="http://jsfiddle.net/kylerm42/fgtLv/4/" rel="nofollow">http://jsfiddle.net/kylerm42/fgtLv/4/</a>. I have my header set at 40px tall and am trying to get all the text links centered vertically within the div. The image is taller than the div and should be at the top, with the bottom hanging over.</p>
  
  <p>I've tried <code>vertical-align</code>, <code>line-height</code> set to the height of the div, <code>display: flex; align-items: center;</code>, and anything else I could find online, but nothing works. I've also tried taking the image out of the rest of the header div, and then move it up 40px using <code>position: relative</code>, and that made it look correct visually, but the image's div was covering up the rest of the links, making them unclickable. Any idea how to get this working like it should? Thanks!</p>