Centrer verticalement une div

Bonjour,
Voila, je viens de lire sur un des tutos qu'il y aurait des solutions pour centrer verticalement des div, mais je ne trouve rien de concret.

Pour ma part j'ai une div de 300px de large et 190 de haut.
Dans cette div, j'ai deux autres div que j'aimerais centrer uniquement verticalement.
Ainsi qq soit le nombre de div qui sera amené a ce trouver dans ce bloc elles seront tj centrés.

Mais comment faire ?

Merci

Salut,

Comme ça ?

christobal a écrit :
Dans cette div, j'ai deux autres div que j'aimerais centrer uniquement verticalement. Ainsi qq soit le nombre de div qui sera amené a ce trouver dans ce bloc elles seront tj centrés.

Pas trop compris ça par contre, plusieurs <div> dans un conteneur de 300px de large ? Un petit croquis pourrait aider.
Modifié par BeliG (20 Nov 2010 - 19:12)

Bonjour,

Hop:

#conteneur {
  display: table-cell;
  width: 300px;
  height: 190px;
  vertical-align: middle;
}

Et voilà. (Attention tout de même: la hauteur se comportera comme un min-height.)

Bon, la légère petite difficulté c'est que c'est pas compatible IE7. J'ai tendance à dire que tant pis, on traite ça en dégradation gracieuse (les éléments seront alignés en haut et pas au milieu dans IE7). S'il faut absolument une compatibilité IE7 pour ce positionnement, voire (horreur) IE6, il faudra utiliser un tableau dans le code HTML.

alors, oui c'est ça, a ceci prêt, que c'est des div que je souhaite centrer verticalement.
Ce qui donne ceci :

<div class="conteneur"> //300px par 190px de haut
     <div class="nav_Verti">Bonjour Toto</div>
     <div class="nav_Verti">Menu 1</div>
     <div class="nav_Verti">Menu N</div>
</div>

christobal a écrit :
alors, oui c'est ça, a ceci prêt, que c'est des div que je souhaite centrer verticalement.

Parce que sur le lien que je t'ai donné, ce n'est pas une <div> qui est centrée ?

Mais si IE7 n'est pas une contrainte, je te conseille d'utiliser la méthode que t'explique Florent à base de table-cell (au passage, c'était aussi précisé dans l'introduction du tuto).
Modifié par BeliG (20 Nov 2010 - 19:53)

La technique pointée par BeliG peut être utilisée, mais il faudra à priori rassembler tes trois div.nav_Verti dans un même DIV. Côté code HTML, ça reste moins lourd que l'ajout d'un tableau de mise en forme. Donc si on veut une technique compatible IE7 (avec les correctifs qui vont bien), c'est un bon choix.