[Résolu] Positionnement d'une image a l'intérieur d'un DIV

Bonjour,

Je souhaite positionné une image dont la hauteur peut varier, juste au milieu d'un DIV dont la hauteur est fixe.

Voila le CSS :

#subCategorie .imageProduct {
	clear:both;
	float:left;
	height:100px;
	width:130px;
}
#subCategorie .imageProduct img {
}

et le code HTML :

<div class="imageProduct"><a href="#"><img /></a></div>

Quelle est la meilleure solution compatible entre tous les navigateurs ? J'ai essayé pratiquement toutes les propriétés de positionnement que je connais, mais aucune ne fais en sorte que l'image soit aligné verticalement au milieu...
.
Merci
Modifié par aRKham Taro (07 Apr 2006 - 18:08)

Eh ben ? Pas de solution ? C'est impossible ?

le positionnement vertical est tres difficile voir impossible seule la propriete

display: table-cell;
vertical-align: middle;

et encore fonctionne mal sous IE

Mouiii ...

Pas tellement d'interêt d'avoir une mise en page bugguée sous IE .. Il n'y a aucune recommandation du W3C concernant exactement l'alignement vertical ou c'est une question d'implémentation des navigateurs ?

J'avais déja testée cette propriété, et il me semble que sous Firefox non plus elle ne soit exempt de bug .. A vérifier ..

En tout cas merci

Bonjour,

Si ton image est une image décorative, tu peux toujours la mettre en background :

background:url(tonimage.png) no-repeat 50% 50%;

Apparement ce n'est pas le cas vu que tu t'en sert de lien ^^'

Sinon, tu peux voir ce qu'il est pssible de faire avec javascript
(recuperer la taille de l'image et ainsi modifier le style de "#subcategorie .imageproduct").
En connaissant la taille de l'image et celle du contenant, ça ne doit pas être trop dur de modifier le style et de positionner l'image en "absolute" au pixel prés dans le bloc contenuer.
(Malheuresement, chez les personnes n'acceptant pas javascript, ça ne marchera pas trés bien )

++ et bon courage

Bonjour cruz,

Merci pour ton commentaire, mais je connais la propriété background-image et comme tu l'as dit toi même, ce n'est pas le cas d'une image décorative..

Pas con ta solution bricolage en javascript, j'pense que je vais devoir passer par ça si je veux un effet relativement propre..

Merci encore,
++

PS: Vive la mise en page en TABLE !!!

bonjour,

un exemple:
http://gcyrillus.free.fr/trucs_css/splash.html

avec display table et compagnie, et une astuce sur l'alignement de plusieurs element inline pour IE.

le principe est tout a fait adaptable a ton simple div, je te laisse t'interesser au differente valeurs de "display" et puis de comprendre l'astuce pour IE ...
Il n'y a rien de revolutionnaire, c'est du deja vu

++

Salut,

Eventuellement tu peux la centrer en lui mettant une taille définie en % et un margin-top de la moitié du restant

Bien sur la taille de image sera variable selon la hauteur de ton div

A toi de voir ci ça te convient

A+
Modifié par gege71 (05 Apr 2006 - 22:09)

bonjour,

je ne crois pas qu'il veulent se servir des marges negatives car il aurait touvé tout de suite dans la FAQ (c'est neanmoins une bonne soluce si il est assuré que l'image ne sera jamais plus grande que le conteneur ).

<edit>rien</edit>
... et a priori, l'images ne sera pas toujours la même

++
Modifié par gcyrillus (05 Apr 2006 - 22:29)

Salut,

Justement si tu as un div de hauteur fixe et que tu mets une image avec un style du type

.centre_img {
margin:15% auto 15% auto;
height: 70%;
}

elle aura toujours le même format et sera bien centré

A+

Merci pour ta solution gege71, mais des images à 70% de leur hauteur n'ont jamais eu un rendu très propre ..

Toujours pas de solution miracle, mais en tout cas merci pour votre aide !

Petit détail, ça ne met pas l’image a 70% de sa taille mais a 70% de la taille du div, et 70 % est un exemple
Et si tu ne spécifie pas de largeur ton image garde ses proportion, et la qualité d’affichage et très bonne

A+

Oui, je l'ai remarqué après l'avoir mis en application.. mais le rendu ne me convenait toujours pas.. Je suis donc retourner à une mise en page plus efficace et portable, les tableaux !!

Merci,
++

Bonjour à tous,

Le sujet peut-il être considéré comme résolu ?

Oui, et tu peux même préciser que c'est résolu par des tableaux.