centrer plusieurs images selon leur nombre

**Rafapouf** · 29/10/2012, 14h34

Bonjour,

J'ai un soucis pour centrer des images.
Elles sont dans une div qui a une taille, seulement le nombre d'image dans cette div est "aléatoire". En fait cette div s'affiche en Js en fonction du pays sur lequel je clique. Et du coup en fonction du pays cliqué, il y a une ou plusieurs images qui s'affichent. La largeur n'est donc pas la même tout le temps, je ne peux donc pas definir de width et donc un margin:0 auto ne peut pas fonctionner

Comment pourrais-je centrer les éléments dynamiquement ?

le code html

Code html :

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

1
2
3
4
5
6
7
8
 
<div class="tooltip">
  <div class="lesinfos">
    <a href=""><img src="image.jpg"></a>
    <a href=""><img src="image.jpg"></a> 
    <a href="#"><img src="image.jpg"></a>
  </div>
</div>

et le css

Code css :

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
.tooltip {
 position:absolute;
 margin : 0 auto;
 color:#fff;
 border:2px solid #cdcdc9;
 padding: 0 10px;
 display:inline;
 width:937px;
 top:470px;
 left:-287px;
 z-index:3;
}
 
 
.lesinfos {
position:relative;
margin: 0 auto;
 
.lesinfos img {
 position:relative;
 padding: 5px 10px 5px 0;
 border-left: 2px solid #cdcdc9;
}
}

**Muchos** · 29/10/2012, 22h05

Je propose de donner aux conteneurs des images (.lesinfos) la largeur minimale d'une image, et de les mettre en display: inline-block. En attribuant un text-align au conteneur le plus élevé (.tooltip), ça centre à la fois les images et leurs conteneurs :

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
31
32
33
34
35
36
37
38
39
40
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Centrage dynamique</title>
	<style type="text/css">
.tooltip {
        text-align: center;
        margin: 1ex;
}
.lesinfos {
        display: inline-block;
        min-width: 218px; /* largeur d'une image ici */
        border: 2px solid #cdcdc9;
        padding: 10px;
}
        </style>
</head>
<body>
<div class="tooltip"><!-- Avec 1 image -->
	<div class="lesinfos">
		<a href="#"><img alt="developpez.net" src="http://www.developpez.net/template/images/logo.png" /></a>
	</div>
</div>
<div class="tooltip"><!-- Avec 2 images -->
	<div class="lesinfos">
		<a href="#"><img alt="developpez.net" src="http://www.developpez.net/template/images/logo.png" /></a>
		<a href="#"><img alt="developpez.net" src="http://www.developpez.net/template/images/logo.png" /></a>
	</div>
</div>
<div class="tooltip"><!-- Avec 3 images -->
	<div class="lesinfos">
		<a href="#"><img alt="developpez.net" src="http://www.developpez.net/template/images/logo.png" /></a>
		<a href="#"><img alt="developpez.net" src="http://www.developpez.net/template/images/logo.png" /></a>
		<a href="#"><img alt="developpez.net" src="http://www.developpez.net/template/images/logo.png" /></a>
	</div>
</div>
</body>
</html>

Invité · 30/10/2012, 07h03

Bonjour,
puisque tu dis que c'est généré en JavaScript, voici un code qui permet de repartir équitablement l'espace entre les images (quels que soient leurs nombre et largeur) :

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
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var Wtotal = $('.lesinfos').width(); // largeur totale
		var i = 0;
		var Wbt = 0;
		$('.lesinfos img').each(function(){
			i++;
			Wbt += $(this).width(); // ajoute la largeur du div
		});
		var esptotal = (Wtotal-Wbt); // espace total
		var nbreesp = i // nombre d'espaces
		// calcul de l'espace entre chaque div
		var demiespace = Math.floor( (esptotal/nbreesp/2)-2 ); // -2 : prend en compte les border (je crois !?) et/ou imprécision de Math.floor
		// margin à droite et à gauche
		$(".lesinfos img").css("margin-right",demiespace+'px').css("margin-left",demiespace+'px');
	});
</script>

Code :

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

1
2
3
4
5
<style type="text/css">
* {margin:0; padding:0;}
.lesinfos {width:1000px; background-color:yellow; margin:0; padding:0; } /* TEST */
.lesinfos img {margin:0; padding:0; } /* TEST */
</style>

Code :

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

1
2
3
4
5
6
7
<div class="tooltip">
  <div class="lesinfos">
    <a href=""><img src="images/pomme.jpg"></a>
    <a href=""><img src="images/banane.png"></a> 
    <a href="#"><img src="images/sprite.png"></a>
  </div>
</div>

**Rafapouf** · 30/10/2012, 09h32

Merci à vous deux !
La méthode en css de Muchos marche bien, le seul problème est que je risque d'avoir des images de différentes tailles et il se peut qu'il y ai un petit décalage, mais ça reste une solution css simple et ça c'est cool !
Jreaux, en javascript je vais aussi tester de ce pas la méthode, qui est un peu moins simple mais l'avantage est qu'on se fout de la taille de départ de l'image !

A bientôt

**Rafapouf** · 30/10/2012, 10h06

Je viens de tomber sur un article parlant du positionnement flex, ou flexbox layout !
Ce qui, si les navigateurs etaient tous à jour et affichaient correctement le code pourrait servir pour ce genre de centrage...

J'ai peur de mettre l'url puisque c'est pas un site Developpez.fr et que je me fais taper sur les doigts quand je le fais

mais avec les mots clefs : CSS3 Flexbox Layout module vous devriez trouver !

centrer plusieurs images selon leur nombre

Centrer un élément en CSS

Discussions similaires

Partager

Partager