html - 如何在此div中垂直居中放置图像？

我在标题中使用以下代码来显示徽标和导航。我以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>

最佳答案

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>

关于html - 如何在此div中垂直居中放置图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38971933/