在导航栏中定位徽标的问题答案

【问题标题】：Problems positioning logo in navigation bar在导航栏中定位徽标的问题
【发布时间】：2014-01-29 06:59:41
【问题描述】：

我正在制作网站，但在导航栏中定位徽标时遇到问题。

我在http://www.fearless-music.net/test创建了一个测试版网站

徽标未出现在其空间的中心。在较小的浏览器窗口中，它隐藏在导航栏的“主页”区域后面。

另外，对于我可以对导航栏进行的代码改进有什么建议吗？

再次感谢！

【问题讨论】：

请在此处发布您的 html/css...！！ :)
实际上徽标出现在其空间的中心。父 li 仅比徽标本身小。
不要在此处发布直接链接。看到这个！ meta.stackexchange.com/questions/7515/why-is-linking-bad

标签： html css navbar

【解决方案1】：

它位于其空间的中心。您的列表项在中间对齐。 <li>标签组合的所有宽度与<ul>的总宽度不一样

使用您的元素检查器，以便您可以很好地查看轮廓

【讨论】：

【解决方案2】：

您需要从 ul 中删除正确的填充。你会看到我们有一个 40px 的左内边距。

header ul {
  padding-right: 0;
}

【讨论】：

【解决方案3】：

如果您缩进代码，则更容易看到发生了什么。尝试将图像添加到它自己的 div 中并将其包含在 p 标签中，然后您将能够使用适当的 css 规则将其居中。使用 css 设置 div 时的提示添加颜色边框或背景，您可以稍后将其删除以帮助调整大小和定位。

   <div class="header">
       <div class="logo">
          <p><img src="images/logo.png" alt="fearless music" /></p>
       </div>

            <ul class="nav">
                <li class"currentpage"><a href="index.html">Home</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Special Link</a></li>
            </ul>

    </div>

【讨论】：

感谢您的帮助！

【解决方案4】：

尝试将第 31 行更改为此 - 这样您就可以看到您的徽标，您也可以添加回您的边距以在 li 中居中，但我建议将徽标从 ul 中取出，这样您就可以拥有对其进行更多控制。

 .nav img {
/* vertical-align: middle; */
padding: 2px 0px;
 }

祝你好运，我希望这会有所帮助:)

【讨论】：