Hamburger menu à la même hauteur que titre

Le hamburger menu est à gauche au sommet de la page.
Je voudrais que le titre, centré sur la page soit à la même hauteur que le hamburger menu.

https://jsfiddle.net/fredericmarcel/2bd9mars/1/

Merci de votre aide.

Hello,

Pour commencer, tu as plein d'erreurs plus ou moins graves dans ton code, dont certaines qui l'empêche forcément de fonctionner :
- il n'existe pas de sélecteur CSS "<h1>"
- h1 est par défaut en display:block; inutile de lui préciser
- top:0px; ne s'applique pas puisque h1 n'est pas positionné
- margin:0 auto; ne s'applique pas puisque h1 est un bloc et occupe donc toute la largeur
- display: inline-block; ne s'applique pas puisque ton .hamburger est en float: left;
- accessoirement, tu n'as pas fermé ton </h1> dans le HTML

Pour ce qui est du centrage, le plus simple serait de passer par Flexbox. Il suffirait d'ajouter un conteneur :

<header class="header">
<span class="hamburger"></span> 
<h1>Le titre centré</h1>
</header>

Et de center tout ça :

.header {
  display: flex;
  align-items: center;
}

Modifié par Raphael (21 Feb 2016 - 17:31)

Merci.
En corrigeant, voici ce que j'obtiens.
https://jsfiddle.net/fredericmarcel/2bd9mars/7/

Ce que je veux, c'est le menu hamburguer à gauche et le titre au centre de la page.

fredericmarcel a écrit :


Ce que je veux, c'est le menu hamburguer à gauche et le titre au centre de la page.

Dans ce cas, tu peux dire à h1 d'occuper tout l'espace via flex: 1; et d'aligner son contenu au centre ainsi :

h1 {text-align:center;flex:1}

PS : tu peux supprimer le float: left du .hamburger, devenu inutile.

Merci Raphael
Le problème est résolu