Centrer plusieurs blocs dans une div

**lostsoul** · 17/02/2013, 16h36

Bonjour,

Je débute en CSS. Je réalise un site, et dans le pied de page, je voudrais arriver à centrer plusieurs blocs horizontalement. Ces blocs sont eux même contenu dans un bloc.

Mais je n'y arrive pas... J'ai farfouillé sur le net, mais rien n'y fait, suis pas doué.

Il y a le bloc pre_footer, et le bloc footer qui contient les blocs à centrer. Les div sont dans des bloc (grid) de différentes largeur, le 12 fait 100%).
Voila le code pour être clair :

Voilà dans la page html :

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
<div id="pre_footer" class="grid_12">
  <div id="footer" class="grid_2">
  <h3>suivre</h3>
  Essai<br>
  Test<br>
  Dernier<br>
  </div>
 
  <div id="footer" class="grid_2">
  <h3>Paiement</h3>
  Essai<br>
  Test<br>
  Dernier<br>
  </div>
 
  <div id="footer" class="grid_2">
  <h3>Clients</h3>
  Essai<br>
  Test<br>
  Dernier<br>
  </div>
</div>

Et le 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
#pre_footer {
	font-size: 25px;
	text-align: center;
	width: 100%;	
	background-color: #9F9F9F;
	font-size: .8em;
	background-image: url("../images/footer-repeat.jpg");
	color: white;
	margin-top: 25px;
	margin-bottom: 0px;
	border-radius: 10px 10px 0 0;
}
 
#footer {
  text-align: center;
  margin: 0 auto;
}

Si quelqu'un peu me renseigner s'il vous plait ?
Merci d'avance,

lostsoul

**NoSmoking** · 17/02/2013, 19h49

Bonjour,

une ID DOIT ETRE UNIQUE !

Ce qui nous manque c'est plutôt la CSS des grid_x.

Regarde peu être du coté de display:table ou autre table-cell.

**lostsoul** · 18/02/2013, 08h37

Voilà le grid.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
.grid_1 { width: 6.6666666666667%; }
.grid_2 { width: 15%; }
.grid_3 { width: 23.333333333333%; }
.grid_4 { width: 31.666666666667%; }
.grid_5 { width: 40%; }
.grid_6 { width: 48.333333333333%; }
.grid_7 { width: 56.666666666667%; }
.grid_8 { width: 65%; }
.grid_9 { width: 73.333333333333%; }
.grid_10 { width: 81.666666666667%; }
.grid_11 { width: 90%; }
.grid_12 { width: 98.333333333333%; }
 
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 0.83333333333333%;
	margin-right: 0.83333333333333%;
	margin-bottom:20px;
	float: left;
	display: block;
}

J'ai mis des id différents, refais d'autres essais, dont table, mais tjs rien......

**NoSmoking** · 18/02/2013, 19h04

Alors là je doit admettre que tu fais fort avec tes width: 31.666666666667%;, je suis sûr que le moteur de rendu apprécie.

A voir...

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[display:table]</title>
<style>
#la_div{
  display:table;
  width:100%;
}
#la_div div{
  text-align:center;
  display:table-cell;
}
</style>
</head>
<body>
<div id="la_div">
  <div>
    <h3>suivre</h3>
    Essai<br>
    Test<br>
    Dernier<br>
  </div>
  <div>
  <h3>Paiement</h3>
    Essai<br>
    Test<br>
    Dernier<br>
  </div>
  <div>
    <h3>Clients</h3>
    Essai<br>
    Test<br>
    Dernier<br>
  </div>
</div>
</body>
</html>

**lostsoul** · 18/02/2013, 19h15

Merci bien, je vais tester ça.
J'ai pris ce fichier d'un site de e-commerce pour tester des trucs.

Centrer plusieurs blocs dans une div

Centrer un élément en CSS

Discussions similaires

Partager

Partager