Comment centrer plusieurs div dans une page.

**solorac** · 18/11/2008, 15h51

Bonjour la Communauté,

Je cherche a centrer dans ma page plusieurs div (5 exactement) de meme dimension qui contienne une mini-affiche.

Voiçi mon code html :

Code :

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

1
2
3
4
5
<div id="actu1"><a href="doctele/promo_batt.pdf" target="_blank"><img src="../../images/site/Promobatt.jpg" /></a></div>
<div id="actu1"><a href="doctele/promo_chabas_11-08.pdf" target="_blank"><img src="../../images/site/promo_chabas_11-08.jpg" /></a></div>
<div id="actu1"><a href="doctele/promo_corteco.pdf" target="_blank"><img src="../../images/site/promo_corteco.jpg" /></a></div>
<div id="actu1"><a href="doctele/promo_fini_11-12-2008.pdf" target="_blank"><img src="../../images/site/promo_fini_11-12-20081.jpg" /></a></div>
<div id="actu1"><a href="doctele/promo_kd_11-2008.pdf" target="_blank"><img src="../../images/site/promo_kd_11-2008.jpg" /></a></div>

Et voiçi ma css :

Code :

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

1
2
3
4
5
6
7
8
9
10
#actu1{border: 5px;
border-color: #FF33FF;
border-style: ridge;
padding:0px;
margin-top: 5px;
margin-right:5px;
margin-left:5px;
float: left;
width:200px;
height:auto;}

Sur "la première ligne", j'ai 3 affiches et sur la "deuxième ligne" j'ai deux affiches.

J'ai essayé la balise <center>, mais cela ne fonctionne pas si je mets un float left, alors que si je mets un float none cela marche bien mais j'ai mes affiches les unes sous les autres et cela me donne une page bien trop long et moche.

Avez-vous quelques idées ??? Merci

**c_s_s** · 18/11/2008, 17h08

Bonjour,

Si tu veux deux lignes, avec 3 affiches centrées sur la première ligne, et 2 affiches centrées sur la seconde ligne, tu peux créer un bloc pour chaque ligne.

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
.ligne1 {
	width:660px;
	margin:0 auto;	
	overflow:hidden;
}
.ligne2 {
	width:440px;
	margin:0 auto;
	overflow:hidden;
}
#actu1{
	border-width: 5px;
	border-color: #FF33FF;
	border-style: ridge;
	padding:0;
	margin:5px 5px 0;
	float: left;
	width:200px;
	height:auto;	
}

Code html :

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

1
2
3
4
5
6
7
8
<div class="ligne1">
	<div id="actu1"><a href="doctele/promo_batt.pdf" target="_blank"><img src="../../images/site/Promobatt.jpg" /></a></div>
	<div id="actu1"><a href="doctele/promo_chabas_11-08.pdf" target="_blank"><img src="../../images/site/promo_chabas_11-08.jpg" /></a></div>
	<div id="actu1"><a href="doctele/promo_corteco.pdf" target="_blank"><img src="../../images/site/promo_corteco.jpg" /></a></div></div>
<div class="ligne2">
	<div id="actu1"><a href="doctele/promo_fini_11-12-2008.pdf" target="_blank"><img src="../../images/site/promo_fini_11-12-20081.jpg" /></a></div>
	<div id="actu1"><a href="doctele/promo_kd_11-2008.pdf" target="_blank"><img src="../../images/site/promo_kd_11-2008.jpg" /></a></div>
</div>