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;
}

希望徽标重叠导航栏并使导航文本垂直对齐：中间带徽标

1 个答案: