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

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.