如何在这个 div 中垂直居中我的图像？

Question

我在标题中使用以下代码来显示我的徽标和导航。我用line-height: 90px; 将我的文本垂直居中，但是当我尝试给我的标志vertical-align: middle; 时，它似乎不起作用。我做错了什么？

header {
  max-width: 960px;
  height: 90px;
  margin: 0 auto;
  line-height: 90px;
  background: #444444;
}
header img {
  width: 59px;
  height: 32px;
  float: left;
}
nav {
  float: right;
}
nav ul li {
  display: inline-block;
}
nav li:not(:last-child) {
  margin: 0px 50px 0px 0px;
}

<header>

  <img src="images/logo.png" alt="Logo">
  <!-- Bild fehlt noch - SVG -->

  <nav>
    <ul>
      <li><a href="#">Start</a>
      </li>
      <li><a href="#">About me</a>
      </li>
      <li><a href="#">Services</a>
      </li>
      <li><a href="#">Portfolio</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>

</header>

Answer 1

Flexbox 可以做到这一点：

header {
  max-width: 960px;
  height: 90px;
  margin: 0 auto;
  line-height: 90px;
  background: #444444;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 59px;
  height: 32px;
}
nav {} nav ul li {
  display: inline-block;
}
nav li:not(:last-child) {
  margin: 0px 50px 0px 0px;
}
nav ul li a {
  color: white;
}

<header>

  <img src="http://www.fillmurray.com/59/32" alt="Logo">
  <!-- Bild fehlt noch - SVG -->

  <nav>
    <ul>
      <li><a href="#">Start</a>
      </li>
      <li><a href="#">About me</a>
      </li>
      <li><a href="#">Services</a>
      </li>
      <li><a href="#">Portfolio</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>

</header>