Nav bar images won't align vertically (CSS)

Question

I want to include some social media icons in my nav bar, but they are refusing to vertically align with the rest of my nav bar.

Here's a JSFiddle with red borders around all the divs so you can see easily the problem. For some reason the two social media icons are not sitting on the same level as the rest of the ul which they are part of.

Any suggestions?

Answer 1

Try this:

change your <a /> style to this:

a {
    text-decoration: none;
    color: white;;
    display: inline-block;
    vertical-align: middle;
}

Then set an <img /> width in pixels:

.navbar img {
    width:55px;
}

See this updated fiddle