导航栏中间的标志

Question

我在搜索 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;
}

Answer 1

有时您可以通过添加 margin: 0 auto; 使 img 元素居中；到你想要居中的属性（在你的例子中是.logo img）否则我会选择 margin-left:45%;或 margin-left:auto 和 margin-right:auto 属性在该球场的 .logo img elemsome 解决方案上。

/S

Answer 2

如果你想这样做，你必须设置 li 宽度，因为菜单项的长度不一样。

CSS:

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

这是您更新后的 JSFiddle

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

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

Answer 3

只需更改应用于徽标 img 的 css。希望这有效。

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

导航栏中间的标志

Logo in the middle of navigation bar

html

css

navigation

menu