CSS header 未对齐。尝试使用 top -20px 菜单的其余部分不对齐来显示 Logo

Question

我正在尝试制作一个标题栏，其中包含一个图像，后跟一个标题和一个菜单车。 该栏显示在 50px 之后，我希望图像稍微向上移动，使其位于包装 div 的顶部并在上面的 50px 中显示一点。 在包装 div 上使用绝对位置并使用图像的相对位置然后将其向上移动 20px 工作正常但是当我这样做时 div 中的其余元素保持在它下面。有没有办法将那些其他元素向上移动到与图像内联？

我已经制作了一个简单的 jsfiddle 来说明我在这里要做的事情:http://jsfiddle.net/67sTt/

HTML:

<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
  <h2>Header</h2>
</div>
<nav class='menu'>
  <ul>
      <li>first</li>
      <li>second</li>
  </ul>
</nav>
</div>

CSS:

.headerContainer {
  top: 50px;
  background-color: green;
  position: absolute;
  width: 100%;
}

.logoContainer {
  height: 120px;
  width: 120px;
  background-color: red;
  display: inline-block;
  position: relative;
  top: -20px;
}

.title {
  font-style: italic;
  display: inline-block;
  position: relative;
  padding: 0;
}

.menu {
  display: inline-block;
  position: relative;
}

我需要标题和菜单在图像中间对齐(红色框)。

使用 position: absolute 将它们移到顶部，这很好，但标题和菜单层位于彼此的顶部。

我知道我可以使用它并在左侧给菜单一些填充，以便它位于标题旁边但是当页面大小减小时菜单移动到图像和标题下方所以我不希望显示填充然后，如果它只能在 css 中完成，我宁愿不提出一些 hacky jquery 方法来管理它。

Answer 1

像这样？ http://jsfiddle.net/67sTt/1/

添加:

vertical-align: top

到菜单和标题