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）否则我会选择保证金：45％;或margin-left：auto with right-right：在该球场上.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;
}

导航栏中间的徽标

3 个答案: