Impossible de centrer mon div verticalement [Résolu]

sleeg · 04/01/2012, 17h11

Bonjour,

J'ai vu qu'on pouvait centrer des div horizontalement et verticalement avec les propriétés suivantes :

Code :

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

1
2
3
4
5
6
7
8
 
position:absolute;
width:990px;
height:648px;
margin-left:50%;
left:-495px;
margin-top:50%;
top:-324px;

Mon div est donc bien centré horizontalement mais verticalement il y a un très grand espace en haut de mon div et pas en dessous...

Quelqu'un pourrait il m'expliquer comment arranger cela car je ne comprend pas vraiment cela... Merci d'avance! et désolé pour ce sujet déjà surement trop expliqué...

jreaux62 · 04/01/2012, 19h02

Bonjour,
à priori, le code CSS est juste.

il faut aussi au moins indiquer :
-> un doctype : <!DOCTYPE HTML>
-> dans le css : body { width:100%; height:100%; }

Si le problème persiste, il faudra nous préciser :
- sur quel(s) navigateur(s) et pour quelle version.
- fournir ici un code suffisant (CSS + html)

NoSmoking · 04/01/2012, 20h08

Bonsoir,
tu y étais presque

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
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Centrage DIV]</title>
<style type="text/css">
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.class_div {
  position:absolute;
  width:990px;
  height:648px;
  /* ton placement */
  left:-495px;
  top:-324px;
  margin-left:50%;
  margin-top:50%;
  /* essaies cela */
  left:50%;
  top:50%;
  margin-left:-495px;
  margin-top:-324px;
  /* pour voir */
  border:1px solid black;
}
</style>
</head>
<body>
<div class="class_div">
</div>
</body>
</html>

la différence est ci dessous

Code css :

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

1
2
3
4
  left:50%;
  top:50%;
  margin-left:-495px;
  margin-top:-324px;

sleeg · 05/01/2012, 10h17

Bonjour et merci pour vos réponses...

Le Doctype y étais, j'ai mis les propriétés de style que vous avez indiqué dans une classe et non en ligne, maintenant ça fonctionne, le problème était peut-être là...

04/01/2012, 19h02	#2
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour, à priori, le code CSS est juste. il faut aussi au moins indiquer : -> un doctype : <!DOCTYPE HTML> -> dans le css : body { width:100%; height:100%; } Si le problème persiste, il faudra nous préciser : - sur quel(s) navigateur(s) et pour quelle version. - fournir ici un code suffisant (CSS + html) __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

05/01/2012, 10h17	#4
sleeg Membre du Club Sleeg Adri Inscription : juillet 2010 Messages : 135 Détails du profil Informations personnelles : Nom : Sleeg Adri Informations forums : Inscription : juillet 2010 Messages : 135 Points : 41 Points : 41	Bonjour et merci pour vos réponses... Le Doctype y étais, j'ai mis les propriétés de style que vous avez indiqué dans une classe et non en ligne, maintenant ça fonctionne, le problème était peut-être là...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email