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]
img {
vertical-align: middle;
}
[/code]

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

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

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]
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 */
[/code]

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.

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 [i]top: 50%[/i] et un [i]margin-top[/i] 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>

[quote="raptor"]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.[/quote]

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

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.

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.

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.

Bonjour !

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

Exemple :

[code]<div>
<img src="" alt="" />
</div>
[/code]
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