How to vertical align links in a div that contains an image?

Question

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: http://jsfiddle.net/kylerm42/fgtLv/4/. 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.

I've tried vertical-align, line-height set to the height of the div, display: flex; align-items: center;, 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 position: relative, 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!

Answer 1

You've tried everything but not position: absolute; which is an appropriate way to go for.. In the snippet below, I used left: 50%; to first position the logo in the center but still it isn't centered, so I negated 1/2 the size of the image which is 75px in width so I used -38px

Demo

img#logo-nav {
    max-width: 75px;
    position: absolute;
    left: 50%;
    margin-left: -38px;
}