[Résolu] Centrer verticalement une image dans un div

Bonjour,

Je voudrais centrer verticalement une image dans un div alors que je ne connais pas la hauteur de l'image.

Pouvez vous m'aider ?

Merci
Modifié par poly_edpf (17 Jul 2006 - 16:32)

Essaye avec "vertical-align: middle;"
Mais je suis pas sure, comme c'est une image.

Bonjour,

En fait, j'ai essayer :
vertical-align: middle
ca marche pas;

J'ai essayer de jouer avec des display:block et des margin-top et margin-bottom comme pour centrer horizontalement et cela ne fonctionne pas non plus.

J'ai bien peur qu'il faille avoir recours à une lib graphique php pour récupérer la taille de mon image et appliquer mon style dynamiquement...

Merci

Montre nous ton code qu'on regarde un peu mieux.

Car en gros tu mets une image dans un div -> Ok
Tu veux la centrer verticalement ? je comprend pas bien, as tu un exemple a montrer ? Car au pire tu mets un padding-top et bottom elle sera centrée. dans ton div.

Râââ, pour la 5165106516è fois, "vertical-align" n'est pas fait pour cela !

Vertical align n'est pas prévu pour aligner un élément quelconque dans un bloc, mais un élément en-ligne dans un autre élément en-ligne (par exemple une image à côté d'un texte)… ou dans un élément de type table-cell.

Oui juste, tout a fait d'accord.
Mais je voyais pas trop ce qu'il demandait.
Promis je ferais plus

Mon code est relativement simple :

<div class="img_contener"><img src="my_img.jpg" alt="my_img_short_caption"/></div>

La class img_contener contient simplemet une information de hauteur :
height:200px;

Je voudrais que mon image soit centrée verticalement des le div de class img_contener.

par avance, merci

Bonjour et bienvenue poly_edpf

As-tu vu que Raphael a peut être donner la solution dans son message ?

Si tu parles de l'utilisation d'un tableau, mon but est d'essayer de m'en passer...

Sinon, j'avoue que je ne vois pas

Si tu as l'information de hauteur, en complétant avec un "line-height: mahauteur;" ça devrait fonctionner

height: 200px;
line-height: 200px;

Merci ! Cela fonctionne

poly_edpf a écrit :
Merci ! Cela fonctionne

Bravo
C'est effectivement la solution n°2 donnée dans mon lien vers la FAQ

Tu considères que ce sujet est [Résolu] ?

euh, bah pas totalement à dire vrai.
Je suis un div qui fait 200px et un line-height de 200px, c'est le bas de l'image qui est à 100px.
Pas le milieu de l'image...
On peut palier à ce problème ?

Salut ...

tu as utilisé le code corrigé ? apparement, ça ne fonctionne pas bien si on déclare séparément la police et le line-height.

Non, ca ne fonctionne pas

poly_edpf a écrit :
euh, bah pas totalement à dire vrai.
Je suis un div qui fait 200px et un line-height de 200px, c'est le bas de l'image qui est à 100px.
Pas le milieu de l'image...
On peut palier à ce problème ?

Bonjour,

Il ne faut pas oublier de spécifier l'alignement vertical pour l'image qui est dans ce "div.img_contener"

div.img_contener img {vertical-align:middle;}

Sinon attention au résultat avec IE qui a un bug à ce niveau. Voir cet article "Line-height / Replaced Element Bug"
Modifié par Alan (17 Jul 2006 - 16:07)

Merci beaucoup,

Cela fonctionne parfaitement.

A bientôt pour de nouvelles aventures !