链接中的图像正在移动链接位置

Question

我正在制作一个基本的导航栏，其中包含所有包含文本的内联链接和一些包含图像的 。当图像在链接中时，它会移动链接元素背景（它显然不会移动链接文本）。如果图像设置为更大的尺寸，背景会移动得更多。我希望所有元素都准确排列。

以下是问题的图片

以下是相关的HTML：

<!--navigation bar-->
<div id="nav">
    <a class="navLinks" href="">Resume</a>
    <a class="navLinks" href="mylinkedinprofileURL">
        <img class="logo" id="logo_linkedin" src="images/logoLinkedin.png">LinkedIn</a>
    <a class="navLinks" href="wordpress">
        <img class="logo" id="logo_wordpress" src="images/logoWordpress.png">WordPress</a>
    <a class="navLinks" href="travels">Travels</a>
</div>  

这是相关的CSS：

#nav {
    position: relative;
    top: 10px;
    text-align: center;
}

.navLinks {
    border-radius: 3px; 
    text-decoration: none;
    color:white;
    text-align: center;
    width:110px;
    height:20px;
    padding:15px;
    background-color: #353841;
    display:inline-block;
}

.logo {
    height:20px;
    position:relative;
    right:10px;
}

我对网络开发非常陌生，所以如果有更好或更优雅的方式来做这件事，请告诉我！

Answer 1

将vertical-align:top添加到标签页。

.navLinks {
    vertical-align:top;
}

See DEMO here.