希望徽標重疊導航欄並讓導航文本垂直對齊：徽標中間

我在導航欄中間添加了徽標。這導致我的導航欄未正確排列，我無法將徽標與導航欄居中（我希望它重疊但仍居中），並將文本與徽標中間垂直對齊。

你可以找到我的網站在這裏的形象：https://skydrive.live.com/redir?resid=DBB455104AF221A9!15298&authkey=!AHytmSrx1n-yf78&v=3&ithint=photo%2c.png

導航欄是灰色的，導航鏈接以紅色標出。

這裏是我的HTML代碼

<nav id="nav" role="navigation"> 
    <ul> 
     <li><a href="#music" id="nav-music">Music</a></li> 
     <li><a href="#pictures" id="nav-pictures">Pictures</a></li> 
     <li><a href="#home" id="nav-home"><img id="home-logo" src="assets/images/logo.png" /></a></li> 
     <li><a href="#videos" id="nav-videos">Videos</a></li> 
     <li><a href="#social" id="nav-social">Social</a></li> 
    </ul> 
</nav>

這裏是我的CSS代碼

#nav{ 
    position: fixed; 
    width: 100%; 
    top: 100px; 
    left: 0; 
    list-style: none; 
    text-align: center;  
} 

#nav ul{ 
    width: 100%; 
    height: 40px; 
    background-color: grey; 
    border-top: 1px solid black; 
    border-bottom: 1px solid #ffffff; 
} 

#nav li{ 
    border: 1px solid red; 
    display: inline-block; 
} 

#nav a{ 
    font-size: 20px; 
    text-decoration: none; 
    color: #000000; 
}

任何幫助將不勝感激。我搜索了這個網站，卻無法找到與此類似的問題。提前致謝。圖像

來源

2014-02-10 user3294360

添加CSS：（給予一定的高度&寬度）

#home-logo { 
    height: 30px; 
    width: 30px; 
}

來源

2014-02-10 19:53:33 RealDeepak

謝謝您的回答RealDeepak。這絕對解決了我的格式問題，但並不完全符合我的要求。我附上了我的預期設計草圖，以及您的代碼更改內容。我該如何重疊導航欄上的徽標，並將導航文本垂直對齊導航欄上徽標的中間位置？再次感謝！以下是圖像： https://skydrive.live.com/redir?resid=DBB455104AF221A9!15308&authkey=!ACdGr46k_rIzyiQ&ithint=folder%2c – user3294360

希望徽標重疊導航欄並讓導航文本垂直對齊：徽標中間

回答

相關問題