Bonjour,

J'étudie le CSS et je n'arrive pas à centrer horizontalement des div avec une propriété css "display: inline-block".
Si dans ma première div ( div1) j'applique une propriété css avec un margin-left:300px, ça centre l'ensemble, mais j'aimerais que ça se fasse de manière automatique, cad que l'ensemble div1 à div4 soit centré sur le plan horizontal, comme avec ma div0 via le "margin:auto", que dois-je faire ?

Voici mon code :
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<html>
<head>
<style>
 
#div0 {      background-color:#ccc;  margin:auto;  width:80%; }
 
 
#div1, #div2, #div3, #div4 { min-height:300px; width:240px;   display: inline-block; vertical-align: top;   }
 
#div1 { background-color:#FF9900; margin-left: }
 
#div2 { background-color:#669933; }
 
#div3  { background-color:#FF3366; }
 
#div4{ background-color:#9966FF; }
 
</style>
</head>
<body >
 
 
 
 
 
 
       <div id=div0 > <h1>div0</h1>
 
<div id="div1" >
DIV 1
 
  blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
  blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
     blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
     blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
     blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
</div>
 
<div id="div2">
 
DIV 2
 
totototo totototototo totoottotototototot otototototoottotot otototototot
 
 
 </div>
 
 <div id="div3">
DIV 3
 
 blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
  blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
     blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
     blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
     blablablablablablabl ablablablablabla blablablablablablablablab lablablabla
    blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
blablablablabl ablablablablablabla blablablablablablab lablablablablablabla
 
 
 </div>
 
 
<div id="div4">
DIV 4
 
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
totototo totototototo totoottotototototot otototototoottotot otototototot
</div>
 
</body>
 
</html>