鏈接中的圖片正在移動鏈接位置

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.