J’ai trouvé un petit tutorial, mais impossible de trouver une solution simple pour Mozilla et IE.
C’est un problème ardu. Tu es sûr que tu as besoin de ça ?
Et le truc de Ben_J, je vois pas ce que ça apporte, vu qu’un élément est toujours placé en haut de l’élément parent. :]
Edit : la taille de ton, elle est fixée ou bien ?
(si oui, on doit pouvoir trouver une solution)
Pour un cadre dont la taille est fixe, c’est pas trop dur : voir ici.
Problème
: faut réajuster suivant la taille de l’image et du conteneur. Mais ça
marche sous Mozilla Firebird 0.7, et IE 5.0 à 6.0.
Salut, je sais si ça pourra t’aider pour ton problème, mais je pense qu’une petite adaptation du tutorial sur le centrage horizontal grâce aux marges négatives peut peut-être marcher, m’enfin bon j’ai pas testé donc je préfère pas trop m’avancer.
[quote]Mhhh ça a l’air bien ça : bingo !.
(en espérant qu’on puisse l’appliquer à autre chose qu’au body, au pire, ça sera utile à quelqu’un )[/quote]hahaha
Le problème c’est que ton objet n’existe pas dans le flux : )
Si tu veux construire quelque chose autour ou centre un paragraphe ça marchera po (même si ça résoud certains problèmes particuliers hein)
Désolé de remonter un post vieux de 2004, mais vu qu’il se trouve premier sur google pour “centrer image verticalement css” je me dis que ma réponse pourrait aider des internautes!
Bref pour centrer verticalement une image dont on ne connaît pas la taille j’ai écris un petit billet sur mon blog que vous pouvez voir ici: Centrer une image verticalement avec PHP et CSS (oui par contre ça demande d’utiliser PHP)
Désolé pour la pub, mais encore une fois je pense que ça pourra vraiment servir à certains :).
Devoir migrer son site sur php pour aligner une image… un peu fastidieux comme manip.
Le background fonctionne, mais c’est pas pratique(image non visible dans l’html, pas de lien possible, ni de hover (ou en css, mais la c’est la loose)…).
Le tableau fonctionne aussi mais c’est dommage de revenir à ces méthodes que le css essaie de nous faire oublier sur nos constructions.
Un contournement consiste à appliquer une marge négative sur ton image, la taille du conteneur et ta police te donneront la valeur,tu prépares ton code et déplace ton image avec le firebug pour trouver ton positionnement souhaité.(par exemple)
�?a fonctionne sur tous les principaux navigateurs, c’est je trouve une solution des plus élégantes sans bidouille.
Et puis ma solution c’est pour quand on ne connait pas la taille de l’image (par exemple images envoyées par l’utilisateur), donc difficile de la placer avec firebug (ou alors j’ai mal compris).
J’ai essayé sur http://www.w3schools…ground-position en remplaçant le code déjà présent par ce qu’il y a en dessous et ça à l’air de fonctionner sur IE 6, firefox 8.0.1 et sur Chrome 16 :
[CODE]
html, body {
height: 98%;
}
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:center;
min-height: 100%;
height: auto !important;
height: 100%;
}
[/CODE]
Je rajoute le height sur html et body parce que sinon ça ne fonctionne pas bien sur firefox, et je le mets à 98% parce que si je mets au dessus Firefox m’affiche une scrollbar.
Peut être que sur les anciennes versions de firefox le comportement était différent.
Si d’autres personnes peuvent tester sur d’autres versions de IE et sur d’autres navigateurs (Opera, Safari), ça peut être intéressant.