Centrer les images d'une galerie

Bonjour, je cherche à centrer les images de ma galerie écrite en javascript. Les images apparaissent calées à gauche, je souhaite les centrer verticalement et horizontalement.
Modifié par st62 (27 Jan 2013 - 01:13)

Bonjour,

Un peu de lecture.

Merci. C'est bien sûr la 1ère page sur laquelle je suis allé, mais le pb est suffisamment compliqué pour qu'un webmaster ayant voulu m'aider ait séché dessus, je me permets donc de solliciter d'autres volontés.

Mes images sont comprises dans un div et je ne sais pas s'il faut modifier le code css ou le fichier.js en lui-même pour qu'elles soient centrées. J'ai essayé de modifier moi-même mon fichier css mais sans résultat.

Ton problème est-il encore d'actualité?
Si non, pourrais-tu éditer ton 1er post et mettre [RESOLU].
Merci!

Disons que je n'ai toujours pas trouvé de solution...

Bonsoir,

c'est possible d'avoir un croquis ou une maquette du résultat souhaité ?

Bonsoir, tu peux cliquer sur le lien vers mon site, le but est de centrer les images qui défilent verticalement et horizontalement. Je ne pensais pas que ce serait si compliqué de faire si simple!...
Modifié par st62 (27 Jan 2013 - 01:13)

Bonjour, oui ok mais dans quel conteneur veux-tu les centrer ? Dans ton div id=page ou div id=images ? Ou dans le body ? On veut bien t'aider mais ça nous prend plus de détails sur le résultat que tu souhaites obtenir.

Je souhaite les centrer dans le div images. En fait actuellement dans ce bloc elles apparaissent pour moi centrées à gauche.

Ton bloc images a une largeur de 450px. Tu as certaines de tes images qui font 450px de largeur et d'autres qui ont une largeur moindre.

Alors, si je comprend bien ce que tu cherches à faire, c'est de centrer tes images qui font moins de 450px dans ton bloc images qui fait 450px de large ?

Quand je visionne avec Chrome, Firefox ou IE8, les images m'apparaissent tout de même pas mal centrée dans la page....

Oui, je veux que les images apparaissent centrées selon un axe vertical et horizontal qui les traverseraient en leur milieu, indépendamment de leur taille et strictement à l'intérieur du div images.

Pour ce que je vois :

Dans ton CSS, ton ID images :

#images {
	float: left;
	height: 450px;
	margin-left: 70px;
	width: 450px;
	text-align: left;
	position: relative;
}

tente un display: table-cell; pour le centrage vertical
et un text-align: center; pour l'horizontal.

Pour info : display: table-cell ne fonctionne pas avec IE6.

Je crois que Raphael a fait un billet là-dessus.

Edit : Dans le lien que Laurie-Anne t'as donné tu as toutes tes réponses.
Modifié par fufu (31 Mar 2011 - 23:30)

bonsoir,

le fait que tu positionne tes images en absolue et que celle ci soit de hauteur disparates tu ne pourra les centré en hauteur qu'a l'aide de javascript en recuperant la hauteur de la fenetre, la hauteur de l'image pour calculer la valeur de top(= hauteur ecran /2 - hauteur image /2 ).

Pour le display:table; qui permettrait un centrage quasi naturel, idem, le positionement en absolu pose probleme.

Pour que tu visualise le probleme , je te propose de tester cette feuille de style a la place de la tienne:
<edit l'image="est en postion statique et passe en positionement absolue a l'apparition de la seconde" />

body , html , #page {
margin: 0 auto;
height:100%;
text-align:center;;
}

/* Liens ******************************************************************/
a {
	font-weight: 700;
	color: #333;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: #666;
}

/* Classes ****************************************************************/ 
.siret {}

.clear {display:none;}

/* Imagin8 ****************************************************************/
.Imagin8 {	
	position: relative;/* qui bug dans FF4 sauf si conteneur enfant de #images et non formaté en display:tabe(-x); */
}
/* Mise en page ***********************************************************/
#texte {
color: #333;
font-family: "Gentium Book Basic";
font-size: medium;
}

#page  {height:100%;
	display:table;
	width: 900px;
	margin: 0 auto;
}

#texte , #images {
	display:table-cell;
	vertical-align:middle;
	padding:0 25px;
}

/* fondue images
***********************************************************/

.imagin8 img + img {
	position:absolute;
left:0; /* qui bug dans FF4 */
}

Une solution en utilisant display-table serait de mettre ton image dans un paragraphe avec une hauteur de façon a ce que cet element se centre.Ce conteneur positioné en relatif les images en positionement absolu sembleront centrée, vu quelles ont de hauteurs differentes et hors du flux, il restera quelques debordement ...
Modifié par gc-nomade (01 Apr 2011 - 23:34)

Bonjour gc-nomad,

ta solution approche de la perfection, sauf qu'elle fait apparaître un bref instant chaque image en fondu à gauche de la page, et que l'effet fade est supprimé de l'animation (dans IE9 et F4). Je suppose que le bug de l'animation est dû à la mention que tu indiques ligne 26. Je ne suis hélas pas capable de régler ça moi-même.

Sinon on y était: avec ton code les images sont effectivement centrées dans leur bloc, et la page également, ce qui n'était pas le cas précédemment.

Mais je ne peux pas garder le site comme ça. Dommage...

Edit: non, en fait ça ne va pas: le texte bouge avec les images.

Conclusion: je vais garder le site tel quel pour l'instant et tenter d'imaginer une mise en page différente et moins problématique, peut-être avec un autre script pour les images.

Merci quand même.
Modifié par st62 (02 Apr 2011 - 14:47)