Un div dans un code de quelques lignes, qui ne se centre pas.

**amateurprg** · 24/10/2019, 17h12

Salut

Je voudrais savoir pourquoi mon div "parametres" ne se centre pas, merci.

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
<DOCTYPE HTML>
<HTML>
 
<head>
<meta charset="UTF-8">
 
<title>PROFIL</title>
 
<link rel="stylesheet" href="travail.css" />
 
</head>
 
<body>
 
<div class="panneaux" id="pannel">
	<div id="centreparams">
		<div id="parametres">
			blabla
		</div>
	</div>
</div>
 
</body>
</HTML>

Code CSS :

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
.panneaux
{
position:relatif;
display:block;
width:100%;
height:100%;
background-color:#A9FF44;
}
 
#pannel
{
background-color:white;
}
 
.param
{
position:relative;
font-size:18px;
padding:1px;
}
 
#parametres
{
position:relative;
display:block;
text-align:left;
width:50%;
background-color:#BBBBBB;
}
 
#centreparams
{
position:relative;
display:block;
text-align:center;
background-color:#00FF00;
width:100%;
margin-top:40px;
}

**HiRoN** · 24/10/2019, 18h32

Hello !

Rajoutes un margin:0 auto; dessus.

Code :

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

#parametres { position:relative; display:block; text-align:left; width:50%; background-color:#BBBBBB; margin:0 auto; }

Pourquoi utiliser autant de position:relative ?
Avec ça :

Code :

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

1
2
3
4
.panneaux { background-color:#A9FF44; }
#pannel { background-color:white; }
#parametres { text-align:left; width:50%; background-color:#BBBBBB; margin:0 auto; }
#centreparams { text-align:center; background-color:#00FF00; margin-top:40px; }

Tu obtiens normalement la même chose.
Un div étant un élément de type block, tu n'as pas besoin de préciser display:block & width:100%, c'est son comportement par défaut.

**amateurprg** · 24/10/2019, 19h56

Merci beaucoup Hiron, tu m'as sauvé

**abdennour bouaicha** · 28/10/2019, 00h35

salut,

Code :

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

margin:0 auto;

parfois ça fonctionne pas, et notre div roule vers la gauche,
c'est mieux utiliser:

Code :

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

margin-left:25%;

et c'est comme ça il fonctionne le framework bootstrap , les .col-xs-1 , col-xs-2 .... se sont rien que des margin-left: x%;
pour le cas général pour centrer un div de taille width: x % :

Code :

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