display: inline-block et centrage de div
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:
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> |
