导航栏中间的标志答案

【问题标题】：Logo in the middle of navigation bar导航栏中间的标志
【发布时间】：2015-09-24 06:59:39
【问题描述】：

我在搜索 SO 时遇到了一些示例，但对我来说 - 作为一个初学者 - 在实现这一点时，我不太清楚最佳实践是什么。

我希望将徽标放在导航栏的中间，其中 2 个链接位于图像的左侧居中，2 个位于右侧，以便我的 4 个链接使徽标的中心与 4 个链接水平对齐。

HTML:

<body>
<nav class="menubar">
    <div id= "navmenu">
        <ul>
            <li><a href="Info.html">Over ons</a></Li>
            <Li><a href="Menu.html">Menukaart</a></Li>
            <li><a class="logo" href="Info.html"><img src="http://i.imgur.com/WwCbbpG.jpg" alt="First8 Logo"></a></li>
            <Li><a href="Ontbijtmanden.html">Ontbijtmanden</a></Li>
            <Li><a href="Contact.html">Contacteer ons</a></Li>
        </ul>
    </div>
</nav>

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,800italic);

.body {
  font-family: "Open Sans";
}

.menubar {
    background: rgb(228, 6, 19);
    box-shadow: 0 1px 3px #999;
    font-family: inherit;
}

.menubar ul {
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.menubar ul li {
  display: inline;
  list-style: none;
}

.menubar ul li a {
  text-decoration: none;
  color: white;
  padding: 0 15px 0 0;
  font-family: "Open Sans"
}

.logo img {
  margin: 10px auto 0px auto;
  display: block;
  width:220px;
}

【问题讨论】：

标签： html css menu navigation

【解决方案1】：

如果你想这样做，你将不得不设置 li 的宽度，因为菜单项的长度不同。

CSS：

.menubar ul li {
    display: inline-block;
    width: 220px;
    list-style: none;
    vertical-align: middle;
}

这是您更新后的JSFiddle

但在我看来，你能做的最好的事情就是使用Bootstrap

//哦，你应该总是使用<li></li>而不是<Li></Li>，绝对不是<li></Li>

【讨论】：

【解决方案2】：

有时您可以通过添加边距来居中 img 元素：0 auto;到您想要居中的属性（在您的情况下为 .logo img）否则我会选择margin-left:45%；或 margin-left:auto 在该球场的 .logo img elemsome 解决方案上具有 margin-right:auto 属性。

【讨论】：

【解决方案3】：

只需更改应用于徽标 img 的 css。希望这行得通。

.logo img {
  width:220px;
  vertical-align: middle;
}

【讨论】：