Discussion :

[Mister Paul]

Bonjour,

j'essaie de centrer horizontalement les images d'un diaporama dans un DIV
Le souci c'est que toutes les images n'ont pas le même format, et que pour l'instant tout est aligné à partir d'un coin supérieur gauche…
Le code d'origine est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#slideshow-container	{ width:800px; height:600px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:3001; }

J'ai bien essayé ça mais ça ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#slideshow-container	{ width:800px; height:600px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; z-index:3001; text-align: center; }

Si vous pouviez me filer un petit coup de pouce…

[Rachel]

bonjour
essaye ceci : #slideshow-container img {display:block; margin-left:auto; margin-right:auto;}

[Mister Paul]

C'est effectivement centré… mais les images s'empilent les unes sous les autres…

[Rachel]

fais voir ton code html s'il te plait. je comprends qu'elles soient empilées, mais je voudrais voir le fonctionnement du diaporama

[Mister Paul]

Le code est ici

[Rachel]

jamais vu mootools en action, ça a l'air sympa
voici le code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#slideshow-container img { display:block; position:absolute; top:0px;left:50%;margin-left:-400px; z-index:3001; text-align: center; }

Ici il faut que tu utilises les marges négatives. tu positionne ton image à 50% du bord gauche, puis tu décales cette image de la moitié de la largeur de ton image.