display: inline-block et centrage de div

**mac7474** · 11/04/2016, 10h37

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>

Invité · 11/04/2016, 11h56

Bonjour,

avant de poster, merci de faire une recherche, et de consulter la FAQ CSS.

Dans ton cas, on peut faire :

Code css :

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

1
2
#div0 { text-align:center; }
#div0 > div { text-align:left; }

**mac7474** · 11/04/2016, 13h18

Merci jreaux62 et intéressant cette notion d'héritage vers les enfants que je ne connaissais pas non plus, je vais aller sur le lien que tu m'as donné pour étudier plus la question et je dois me souvenir qu'un "text-align:center;" n'agit pas que sur le texte.

Bonne journée.

display: inline-block et centrage de div

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager