行中间带徽标的CSS导航

Question

我正在尝试创建一个包含6个项目的导航菜单，左侧3个，右侧3个带徽标（徽标垂直和水平居中）

我遇到的问题是徽标看起来居中，但不是垂直。此外，导航项目与徽标相距太远，右侧的导航项目顺序不正确。

我想要完成的是让它看起来像附带的截图。

https://jsfiddle.net/fa970mnm/2/

＆＃13;

＆＃13;

.site-footer ul {
  list-style: none;
}

.site-footer ul li a {
  color: #e1c66b;
}

#logo {
  height: 125px;
}

.nav {
  text-align: center;
}

.nav li {
  display: inline;
  margin-right: 1em;
}

@media(min-width:786px) {
  .nav li:nth-child(1),
  .nav li:nth-child(2),
  li:nth-child(3) {
    float: left;
  }
  .nav li:nth-child(4),
  .nav li:nth-child(5),
  li:nth-child(6) {
    float: right;
  }
}

＆＃13;

<div style="text-align:center;">
  <img id="logo" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/logo.png" />
  <ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/shop/">Shop</a></li>
    <li><a href="/our-story/">Our Story</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/contact-us/">Contact Us</a></li>
    <li><a href="/foundation/">Foundation</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这种情况下，您可能最适合使用flexbox。您只需对容器<div>使用以下规则。

#banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

您可以使用我添加的margin-right类的.element规则来更改间距，或者从上面的链接中查看justify-content: space-between。

这里是JSFiddle。

Answer 2

为什么不把标识放在LI之间？ 只需移动徽标并改进CSS：

.nav li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}

显示为＆＃39;内联块＆＃39;，因为＆＃39; vertical-align middle＆＃39;不能使用＆＃39; inline＆＃39;。

https://jsfiddle.net/fa970mnm/14/

Answer 3

小时候首先将logo移至.nav。

然后将.nav li inline更改为display: inline-block;。

喜欢这个

.nav li {
  display: inline-block;
  margin-right: 1em;
}

以下是工作代码段

＆＃13;

＆＃13;

.site-footer ul {
  list-style: none;
}

.site-footer ul li a {
  color: #e1c66b;
}

#logo {
  height: 125px;
}

.nav {
  text-align: center;
  vertical-align: middle;
}

.nav li {
  display: inline-block;
  margin-right: 1em;
  vertical-align: middle;
}

＆＃13;

<div style="text-align:center;">
  <ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/shop/">Shop</a></li>
    <li><a href="/our-story/">Our Story</a></li>
    <li>
      <a href=""><img id="logo" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/logo.png" /></a>
    </li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/contact-us/">Contact Us</a></li>
    <li><a href="/foundation/">Foundation</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;