O cabeçalho CSS não está alinhado.Tentando exibir o logotipo usando os -20px superiores, o restante do menu não está alinhado

Question

Estou tentando fazer uma barra de cabeçalho que contenha uma imagem seguida de um título e um carro de menu.A barra é exibida após 50px e quero que a imagem seja movida um pouco para cima para que fique acima do div de quebra e apareça um pouco nos 50px acima.Usar a posição absoluta no div de empacotamento e a posição relativa à imagem e, em seguida, movê-la para cima em 20px funciona bem, mas quando faço isso, o restante dos elementos no div ficam abaixo dela.Existe uma maneira de mover esses outros elementos para que fiquem alinhados com a imagem?

Fiz um jsfiddle simples do que estou tentando fazer aqui: 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;
}

Preciso que o título e o menu se alinhem no meio da imagem (a caixa vermelha).

Usando posição:absoluto os move para o topo, o que é bom, mas o título e a camada do menu ficam um em cima do outro.

Eu sei que poderia usar isso e dar ao menu algum preenchimento à esquerda para que fique próximo ao título, mas quando o tamanho da página é reduzido, o menu se move abaixo da imagem e do título, então não quero que o preenchimento seja mostrado, e Prefiro não inventar uma maneira hacky de jquery de gerenciar isso, se isso puder ser feito apenas em CSS.

Answer 1

assim? http://jsfiddle.net/67sTt/1/

adicionar:

vertical-align: top

para menu e título