Centrer verticalement dans un DIV une image

22 mars 2007, 20:20

Bonjour !

Je souhaiterai savoir comment fait-on pour centrer verticalement un élément (image par exemple) dans un DIV.

Exemple :

Code : Tout sélectionner

<div>
<img src="" alt="" />
</div>

J'ai essayé d'utiliser les propriétés CSS vertical_align:middle, mais je n'ai eu aucun résultat.

Auriez-vous une autre idée ?

Merci beaucoup !

Olivier

23 mars 2007, 00:30

Bonjour

Des éléments de réponse ici http://forum.alsacreations.com/faq/#item3

Le plus simple et efficace pour tous les navigateurs est encore de faire un tableau dans ton div.

23 mars 2007, 08:18

Comme quoi on a beau dire "ouais css2 blabla, les tableaux c'est mal etc..." mais les tableaux ont je pense encore pas mal de jours devant eux.

23 mars 2007, 13:52

Bonjour,

Pour compléter mon message précédent, il existe aussi la possibilité d'utiliser style="padding-top:..." à l'intérieur de ta balise image. Mais cela suppose que tu connaisses la hauteur de ton div et de ton image.

29 mars 2007, 11:39

Comme quoi on a beau dire "ouais css2 blabla, les tableaux c'est mal etc..." mais les tableaux ont je pense encore pas mal de jours devant eux.

Bien sûr que les tableaux ont encore de beaux jours! Le tout est d'utiliser les 2 avec harmonie!

Un mix de css et tableau est un bon choix

29 mars 2007, 13:56

Utiliser des tableaux pour faire de la mise en page n'est pas l'idée du jour.

Piste de solution : si ton contenant (le bloc <div>) a une dimension, alors ajoute un style CSS :
-1- mets ton bloc en position relative ;
-2- positionne ton image en absolute avec top: 50% et un margin-top négatif de la moitié de la hauteur de ton image;
Le positionnement de l'image se fera par rapport au premier élément parent positionné, ce qui explique pourquoi tu dois positionner le bloc <div>

30 mars 2007, 11:53

Salut!

Si ton image n'est pas le seul élément en ligne contenu dans le bloc, tu peux utiliser vertical-align: middle.

Pour illustrer le contexte:

Code : Tout sélectionner

img {
  vertical-align: middle;
}

Code : Tout sélectionner

<div>Un peu de contenu accompagnant une image <img src="image.jpg" alt="Texte alternatif" /></div>

La propriété vertical-align aligne verticalement une cellule de tableau ou un élément en ligne relativement à un autre élément en ligne adjacent.

Autrement dit, si ton image est toute seule dans le bloc et que tu veux utiliser vertical-align, il faut déclarer dans le fichier CSS le code suivant:

Code : Tout sélectionner

div {
  display: table-cell;
  vertical-align: middle;
  height: 400px; /* Il faut définir une hauteur, sinon le bloc occupera seulement la hauteur de l'image */
}
/* Et l'on ne déclare rien pour img */

Le principal inconvénient est qu'Internet Explorer, même dans sa version 7, n'implémente pas la déclaration display: table-cell. Dans ce cas, pour IE, la solution proposée par Cyrano fera l'affaire.

Centrer verticalement dans un DIV une image

Qui est en ligne