Discussion :

[niavlys77]

Bonjour,

Voilà 3 heures que je m'escrime à essayer de centrer un nombre variable d'images (1, 2, 3) les unes à côté des autres dans un div B (taille fixe) lui même contenu dans un div A (taille fixe). J'ai parcouru le net, les forums, essayez toutes les solutions proposées: du display:block, du margin: 0 auto et d'autres manipulations tarabiscotées, ça ne marche pas !!! J'arrive à centrer parfaitement une image dans mon div, mais dés qu'il en faut une deuxième, elle va se coller en dessous de la première, alors je mets un float: left, ce qui met bien les images côte à côte, mais forcément aboli le centrage. Ca devrait être SIMPLE pourtant...


A
------------------------------------------
| ________B______ |
| | | |
| | 1 2 3 | |
| |__________ _____| |
| |
-----------------------------------------

Voici le code HTML

Code :

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

1
2
3
4
5
6
7
8
 
<div id ="A">				
      <div id="B">
	   <div id="Image"><img src="1.png"/></div>
           <div id="Image"><img src="2.png"/></div>
           <div id="Image"><img src="3.png"/></div>
      </div>
</div>

Et le code CSS

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
21
22
23
24
25
26
27
28
29
30
31
32
33
 
#A
{
	background-color: rgb(255,255,255);
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border: 2px solid rgb(12,88,165);	
	height : 44px;
	width: 815px;
	margin: 10px;
	Padding: 5px;
	font-size: xx-large;
}
 
#B
{
	float: left;
	width: 393px;
	height:44px;
	margin-right: 2px;
	margin-left: 2px;
	background-color: black;
	display: block;
	margin: 0 auto;
	text-align: center;
}
 
#Image
{
        float: left;
	margin-left:4px;
	margin-right:4px;
}

Voilà, la tambouille, je suis ouvert à toutes aides car là... j'en peux plus

Merci par avance de l'aide que vous pourriez m'apporter...

[desert]

Bonjour,
Tu dois retirer le float:left du div#B sinon il ne se centrera pas.
Par contre, il faut éviter de donner le même id à plusieurs balises. Un id est unique ! Tu dois soit donner un id différent pour chacune des div qui entourent tes images, soit changer l'id par une classe.

[niavlys77]

Ah purée ça marche... En fait, le gros de mon problème c'est que je n'utilisais que des DIV, une sale habitude que j'ai prise depuis peu. Il m'a suffit de supprimer les <DIV id="Image"> superflus et de créer un #B img {margin-left: 4px; margin-right: 4px} dans mon code CSS pour que mon problème s'évapore aussitôt.

Un grand merci à toi, ma compréhension de ce langage (ainsi que de mes problèmes) vient de faire un grand pas...

[Alliastetef]

Bonjour,

Ce qui posait problème avec tes div était le fait qu'elles sont de types block. Donc forcément elles se placaient les unes au dessus des autres. Il aurait fallu les passer en inline pour qu'elles s'alignent. Néanmoins c'est mieux que les aies enlevées.