Centrer horizontalement les img d'un diaporama ?

**Mister Paul** · 23/02/2012, 16h00

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** · 23/02/2012, 16h50

bonjour

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

**Mister Paul** · 23/02/2012, 17h00

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

**Rachel** · 23/02/2012, 18h01

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** · 23/02/2012, 18h09

Le code est ici

**Rachel** · 23/02/2012, 19h26

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.

**Mister Paul** · 23/02/2012, 19h30

oui mais euh... le souci c'est justement que toutes les images n'ont pas le même format…

**NoSmoking** · 23/02/2012, 20h33

Bonsoir,
une petit exemple de centrage d'image dans un conteneur

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Centrage Vertical et horizontal</title>
<style type="text/css">
div{
  width:300px;
/*  height:300px;/* pas obligatoire si contient des éléments en display:inline */
  line-height:300px; /* aligne verticalement des éléments en display:inline */
  border:1px solid #e0e0f0;
  text-align:center;
}
img{
/*  display:block; /* ne pas mettre pour que le line-height du conteneur soit pris en compte */
  vertical-align:middle;
  border:1px solid #000;
/*  margin: auto;/* ne sert à rien dans ce cas */
}
</style>
</head>
<body>
<div>
  <img src="http://web.developpez.com/faq/theme/images/mini_logo_faq_css.gif" alt="">
</div>
<div>
  <img src="http://www.developpez.net/template/images/logo.png" alt="">
</div>
</body>
</html>

reprise du code CSS pour coloration syntaxique et lisibilité des commentaires !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
  width:300px;
/*  height:300px;/* pas obligatoire si contient des éléments en display:inline */
  line-height:300px; /* aligne verticalement des éléments en display:inline */
  vertical-align:middle;
  border:1px solid #e0e0f0;
  text-align:center;
}
img{
/*  display:block; /* ne pas mettre pour que le line-height du conteneur soit pris en compte */
  border:1px solid #000;
/*  margin: auto;/* ne sert à rien dans ce cas */
}

**Rachel** · 23/02/2012, 21h07

donc voilà le css :

Code :

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

#slideshow-container img { display:block; position:absolute;top:0px;left:50%; z-index:1; }

et tu dois modifier un peu le javascript à cet endroit :

Code :

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

1
2
3
4
5
6
images.each(function(img,i){ 
				if(i > 0) {
					img.set('opacity',0);
				}
				img.setStyle('margin-left','-'+img.get('width')/2+'px');
			});

**Mister Paul** · 24/02/2012, 15h38

Merci de consacrer du temps à mon petit souci…

@ NoSmoking
Oui cela centre bien les images... mais malheureusement elles se chargent les unes au-dessous des autres…

@rotrevrep
Hum pas mal tenté ! Mais le javascript ne modifie pas la position horizontale de l'image (elle reste avec le bord gauche au centre de la fenêtre) :
- img.get('width')/2 ne renvoie rien
- mais même si je mets

Code :

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

img.setStyle('margin-left','- 200px');

ça ne change rien non plus…

**Rachel** · 24/02/2012, 15h45

Envoyé par Mister Paul

Merci de consacrer du temps à mon petit souci…

@ NoSmoking
Oui cela centre bien les images... mais malheureusement elles se chargent les unes au-dessous des autres…

@rotrevrep
Hum pas mal tenté ! Mais le javascript ne modifie pas la position de l'image :
- img.get('width')/2 ne renvoie rien
- mais même si je mets

Code :

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

img.setStyle('margin-left','- 200px');

ça ne change rien non plus…

si tu as fait comme je te l'ai dis, et au bon endroit, ça fonctionne

et pas d'espace entre le - et le nombre.
Montre vraiment ton code s'il te plait, que l'on voye où ça cloche.

**Mister Paul** · 24/02/2012, 16h06

Effectivement j'avais ajouté un espace dans '- 200px'

Mais img.get('width') me renvoie NULL

Mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.addEvent('domready',function() {
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	/* opacity and fade */
	images.each(function(img,i){ 
		if(i > 0) {
			img.set('opacity',0);
		}
		img.setStyle('margin-left','-'+img.get('width')/2+'px');
	});
	/* worker */
	var show = function() {
		images[currentIndex].fade('out');
		images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in'); 
	};
		interval = show.periodical(showDuration);
});

**Rachel** · 24/02/2012, 16h37

j'ai omis de te dire que dans le html, tu devais attribuer à tes images les valeurs width et height pour que le script les interprète

Code :

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

<img src="" width="333" height="400" />

**Mister Paul** · 24/02/2012, 17h14

Ah je comprends mieux…

Avec + de 400 images je sens que je vais générer ça en PHP : je me vois mal aller les chercher à la main une à une…
Je m'y colle ce soir.

**NoSmoking** · 24/02/2012, 17h20

Envoyé par Mister Paul

@ NoSmoking
Oui cela centre bien les images... mais malheureusement elles se chargent les unes au-dessous des autres…

j'ai du mal à saisir où est le problème attendu que tu fais un slide par FadeIN/OUT. ?

PS : d'ailleurs il manque un vertical-align : middle; dans le CSS des img, je mets à jour...

**Mister Paul** · 24/02/2012, 17h34

Envoyé par NoSmoking

j'ai du mal à saisir où est le problème attendu que tu fais un slide par FadeIN/OUT. ?

PS : d'ailleurs il manque un vertical-align : middle; dans le CSS des img, je mets à jour...

Ben malheureusement ça ne règle par le problème d'empilement…

Les images apparaissent bien en fade in/out…mais au fur et à mesure les unes au dessous des autres !

**NoSmoking** · 24/02/2012, 17h44

je viens de percuter il y a fadeOUT ET IN en même temps

dans ce cas la soluce que j'ai proposée ne tiens pas effectivement.

Il devient donc bien judicieux dans ce cas de connaitre la largeur, donc au boulot

(voir SAUF)

SAUF...Il y a toujours un sauf
tu peux mettre tes images dans une DIV en position absolute, reprend l'exemple que j'ai fournie en ajoutant dans le CSS de la div position:absolute pour voir.

Code :

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

1
2
3
4
5
6
7
8
div{
  position:absolute;
  width:300px;
/*  height:300px;/* pas obligatoire si contient des éléments en display:inline */
  line-height:300px; /* aligne verticalement des éléments en display:inline */
  border:1px solid #e0e0f0;
  text-align:center;
}

**Mister Paul** · 24/02/2012, 18h02

Pas mieux malheureusement…

**NoSmoking** · 24/02/2012, 18h28

Envoyé par Mister Paul

Pas mieux malheureusement…

CHAQUE image doit se trouver dans une DIV, comme dans l'exemple que j'ai mis.

**Mister Paul** · 24/02/2012, 18h43

Ah… je m'y perds un peu, pardon.
Dans ma page :

Code :

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

1
2
3
4
5
6
 
	<div id="slideshow-container">
					<div><img src='xxx1.jpg'></div>
					<div><img src='xxx2.jpg'></div>
					(...)  
	</div>

Dans ma CSS :

Code :

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

1
2
#slideshow-container	{ position:absolute;  width:800px; line-height:300px; border:1px dotted Red; text-align:center; 
#slideshow-container img {  border:1px solid Green; vertical-align:middle;  }

Pour l'instant ça ne fonctionne pas, mais j'ai dû rater quelque chose…

Centrer horizontalement les img d'un diaporama ?

Centrer un élément en CSS

Discussions similaires

Partager

Partager