以图片居中的 HTML/CSS 水平导航栏

Question

我的导航栏有问题，我想创建一个带有链接和中间图片的水平导航栏。图片已经很好，但链接不一致。我想要工具栏中间的链接。 非常感谢您的帮助。

附言: 我必须再写一些文字，因为代码太长了，我不知道还有哪些信息是您不需要的，但如果您有任何问题，请随时问他们。

* {
  box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

.col-2 {width: 16.66%;}

.col-4 {width: 33.33%;}

/* HEADER */
.nav {
  overflow: hidden;
  background-color: #364d63;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  width: 100%;
  padding: 0 0 0;
  text-align: center;
  vertical-align: middle;
}
.navbar-form
.center {
  padding: 0 0;
  text-align: center;
  vertical-align: middle;
}

.nav a {
  color: white;
  font-size: 18px;
  line-height: 25px;
  text-decoration: none;
  display: inline-block;
}
.nav li {
  display: inline;
}
.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

  <header>
    <ul class="nav">
      <li><a href="gruppen.html" class="col-2 center">Gruppen</a></li>
      <li><a href="shows.html" class="col-2 center">Shows</a></li>
      <li><a href="index.html" class="col-4 center"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo"></a></a></li>
      <li><a href="geschichte.html" class="col-2 center">Geschichte</a></li>
    <li><a href="bilder.html" class="col-2 center">Bilder</a></li>
    </ul>
  </header>

Answer 1

你可以使用display:flex

* {
  box-sizing: border-box;
}



/* HEADER */
.nav {
  background-color: #364d63;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  width: 100%;
  display: flex;

   list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav li {
  flex-grow:1;
}

.nav a {
  color: white;
  font-size: 18px;
  line-height: 25px;
  text-decoration: none;
  border: 1px solid red;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content:center;
}


.nav  {
 
}

<header>
    <ul class="nav">
      <li><a href="gruppen.html">Gruppen</a></li>
      <li><a href="shows.html">Shows</a></li>
      <li><a href="index.html"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo"></a></li>
      <li><a href="geschichte.html">Geschichte</a></li>
    <li><a href="bilder.html" >Bilder</a></li>
    </ul>
  </header>