HTML / CSS горизонтальная навигационная панель по центру с картинкой посередине

Question

У меня проблема с моей навигационной панелью, я хочу создать горизонтальную навигационную панель со ссылками и картинкой посередине.Картина уже в порядке, но ссылки не в строке.Я хочу ссылки в середине панели инструментов.заранее большое спасибо за вашу помощь.

PS: Я должен написать еще немного текста, потому что код слишком длинный, и я не знаю, какая дополнительная информация вам не нужна, но если у вас есть какие-то вопросы, не стесняйтесь их задавать.

* {
  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

    .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;
}

Обновите вашу CSS, и вам будет хорошо.

Answer 2

Помимо использования flexbox, предлагается переместить display:inline-block и vertical-align:middle с <a> элементов на <li> элементов.

Я также удалил пробелы между <li> элементами, чтобы избежать нежелательных пробелов.

Непонятно, как бы вы хотели обрабатывать элементы списка, которые слишком узки для их содержимого.
Я просто установил overflow:hidden.

* {
  box-sizing: border-box;
}

[class*="col-"] {
  /*float: left;*/
  padding: 15px;
  border: 1px solid red;
}
.col-2 {
  width: 16.66%;
}
.col-4 {
  width: 33.33%;
}


.nav {
  background-color: #364d63;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
}

.nav a {
  display: block;
  color: white;
  font-size: 18px;
  line-height: 25px;
  text-decoration: none;
  overflow: hidden;
}

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

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

Answer 3

вы можете использовать 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>