Problemas ao alinhar verticalmente imagem e lista flutuando à direita

Olá pessoal, Faz três dias que tento resolver esse problema e não consigo.

Estou tentando fazer um portifólio igual ao da imagem abaixo, utilizando apenas html, css e javascript.

Não estou conseguindo fazer a barra no topo, não consigo alinhar o logo e o menu verticalmente. O meu logo, como o do site exemplo, é uma imagem png, o menu é um lista com o display: inline nos items, para que fiquem um ao lado do outro. Vejam abaixo o que ocorre:

O menu fica no topo e não no meio do container, claro que eu poderia fazer isso com Bootstrap, ou talvez usando flexbox. Mas, quero entender o porquê de não conseguir fazer isso apenas com display, position e float.

Talvez não tenha entendido o assunto direito

Quase consegui fazer usando position absolute , com right: 0 e top: 50%, mas é uma centralização imprecisa, já que não desconta a altura do elemento, poderia usar calc(50% - npx), npx = altura do menu, mas aí deixaria de ser reponsivo, se mudasse a fonte ou seu tamanho perderia a centralização.

Depois de ter terminado a carreira de front-end, não consegui centralizar uma simples imagem e um menu, é meio frustante... mas ainda tenho esperanças :)

segue abaixo o fonte:

<div class="barra-navegacao">
  <div class="container">
    <img src="https://s31.postimg.org/t0teod9p7/logo_simples_flavio.png" alt="" />
    <ul class="menu">
      <li>About</li>
      <li>Portfolio</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

.barra-navegacao{
  width: 100%;
  background: #A2A;
}

.container{
  width: 70%;
  margin: 0 auto 0 auto;
}
.logo{
}
.menu{  
  float: right;
  display: inline-block;

}
.menu li{
  display: inline;
  padding: .3em;
  background: #999999;
}