希望徽标与导航栏重叠，并具有导航文本垂直对齐:与徽标的中间对齐

Question

问题：

我在导航栏中间添加了一个徽标。这导致我的导航栏无法正确对齐，并且我无法将徽标与导航栏居中（我希望它重叠但仍居中）并将文本与徽标中间垂直对齐。

你可以在这里找到我的网站的图片：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; 
} 

任何帮助将不胜感激。我搜索了这个网站，但找不到与此类似的问题。提前谢谢。

Answer 1

为

图像添加CSS：（给出一些高度和宽度）

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