Bonjour à tous, je dois réaliser un projet de site internet dans le cadre de mes études. Je me retrouve confronté à un problème pour centrer trois articles mis au même niveau à l'aide de l'attribut float:left. Voyez plutôt, le fond est en partie noir de manière volontaire (background-color: black) pour bien voir le décalage.



Voici mon code html :
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
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EA Support</title>
        <link rel="stylesheet" type="text/css" href="design1.css">
	</head>
 
	<body>
    	<?php include("/includes/en_tete.php"); ?>
        <?php include("/includes/navigation.php"); ?>
        <div id="corps">
          <!--  <h1>
            	Produits
                <hr />
            </h1>-->
       		<p class="article">
       			<img alt="Papier A4" src="images/papier.jpg" /><br />
               	<span class="titre_article">Papier A4</span><br />
               	<span class="descriptif_article">Une fantastique ramette de papier qui comblera tous les tueurs d'arbres en série.</span>
           	</p>
           	<p class="article">
               	<img alt="Compact Disc" src="images/cd.jpg" /><br />
               	<span class="titre_article">CDs</span><br />
               	<span class="descriptif_article">Pour tous les jeunes qui piratent de la musique.</span>
           	</p>
           	<p class="article">
               	<img alt="Digital Versatile Disc" src="images/dvd.jpg" /><br />
               	<span class="titre_article">DVDs</span><br />
               	<span class="descriptif_article">Pour tous les jeunes qui piratent des films (pas bien).</span>
            </p>
        </div>
        <?php include("/includes/pied.php"); ?>
	</body>
</html>
et mon 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
*
{
	margin: 0;
	padding: 0;
}
 
a
{
	text-decoration: none;
}
 
a:hover, a:focus
{
	background:#9DAAE2;
}
 
hr
{
	height: .1em;
	background-color: #1C29A7;
}
 
html
{
	min-height: 100%;
	max-width: 1000px;
	min-width: 600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-family: Calibri, Gulim, Georgia, Arial;
}
 
h1
{
	margin-left: 15%;
	max-width: 1000px;
	color: #485DC5;
}
 
p
{
	color: #485DC5;
	text-align: center;
	background-color:#000;
}
 
.article
{
	width: 30%;
	float: left;
	margin-left: auto;
	margin-right: auto;
}
 
.article img
{
	text-align: center;
}
 
.descriptif_article
{
	font-size: 1em;
}
 
.sous_titre
{
	font-size: 1.1em;
	text-align: right;
	margin-bottom: 50px;
	color: #485DC5;
}
 
.titre_article
{
	font-weight: bold;
	font-size: 1.2em;
}
 
.titre_register
{
	text-align: left;
	background-color: #1C29A7;
	color: white;
	padding: 2px;
	font-weight: bold;
	margin-right: 25%;
}
 
#corps
{
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	min-width: 600px;
	width: 100%;
}
 
#en_tete
{
	height: 129px;
	width: 350px;
	background: url("images/header.png");
	background-repeat: no-repeat;
}
 
 
#navigation
{
	background-color: #1C29A7;
	text-align: right;
	color: white;
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 50px;
	font-family:  Gulim, Georgia, Arial;
}
 
#navigation a
{
	color: white;
}
 
#navigation ul
{
	text-align: right;
}
 
#navigation li
{
	display: inline;
	list-style: none;
	margin: 10px;
}
Je n'arrive pas vraiment à voir d'où vient le problème. Je trouve bizarre cette absence de centrage puisque mon #corps contient margin-left et margin-right pour positionner normalement au centre.

Si quelqu'un pouvait m'aider, je lui en serait très reconnaissant.

Merci d'avance.