Как выровнять плавающий lo go в горизонтальной панели навигации

Question

• 1000 путь.

<div class="navigation-bar">
    <div class="nav-wrap">
      <div class="nav-bar">
        <div class="logo">
          <img class="" alt="Logo" src="../assets/logo.png" />
        </div>
        <div class="nav-list">
          <ul>
            <li>I didn’t get my tickets</li>
            <li><a>CREATE YOUR OWN EVENT</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

.nav-wrap {
  clear: both;
  overflow: auto;
  justify-content: center;
  display: flex;
}
.nav-bar {
  width: 80%;
  border: 1px solid red;
}
.logo {
  float: left;
  line-height: 70px;
  position: absolute;
}
.nav-list {
  float: right;
}
ul li {
  display: inline-block;
  padding: 10px;
  font-size: 20px;
  font-family: raleway;
}

img {
  height: 32px;
  width: 172px;
  object-fit: contain;
}

Это мой код, как мне это исправить?

Answer 1

Я создал JSFiddle, чтобы помочь вам визуализировать этот ответ: https://jsfiddle.net/wn8avcbt/

В вашем классе .nav-bar вам нужно будет убедиться, что это display: flex и использует выравнивание содержимого и выравнивание элементов по центру. align-items - это специфический c CSS элемент, который вы ищете: я бы не делал изображение абсолютным, а вместо этого позволял бы ему следовать гибкости своего родителя.

display: flex;
justify-content: space-between;
align-content: center;
align-items: center;

Если у вас есть вопросы, не стесняйтесь комментировать.

Answer 2

В стиле .logo скажем display: flex; и align-items: center;. Если вы не понимаете, с go на https://www.w3schools.com/css/css3_flexbox.asp. Надеюсь, это помогло!