Centrer la DIV

**SangKou** · 19/12/2005, 02h07

Bonsoir à tous,

Comme que je débutes, j'aimerais bien avancer de petit à petit afin de ne pas bouseiller

Trêve de blabla

Voici le code de css :

Code :

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

1
2
3
4
5
6
7
8
9
body
	{
	background-image: url(images/background.gif);
	}
 
#corps
	{
	align: center;
	}

Et celui de php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>SangKou</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design par défaut" href="includes/themes/pardefaut.css" />
	</head>
 
	<body>
		<div id="corps">
		tt
		</div>
	</body>
</html>

Normalement le texte "tt" devra être centré non ?
Parce qu'il est à gauche de l'écran et j'aimerais bien qu'il soit centré !
Ai-je laisse filé un petit erreur ?

-------------

Edité :

J'aimerais bien ajouter un tableau dedans donc faudra que j'ajoute un DIV en plus ?

<div id="corps">
<div id="header">
xxxxxx
xxxxxx
xxxxxx
</div>
<div id="ventre">
</div>
<div id="footer">
</div>
</div>

(bonne nuit je vais me coucher je ne tiens plus lol)

**balu** · 19/12/2005, 06h26

Changes align pour text-align.

Code :

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

1
2
3
#corps {
  text-align: center;
}

**SangKou** · 19/12/2005, 09h23

Effectivement c'était ça

Mais pour centrer des div comment on fait ?

Parce que "text-align: center;" c'est seulement pour les textes non ?

**Linaa** · 19/12/2005, 14h45

Envoyé par SangKou

Effectivement c'était ça

Mais pour centrer des div comment on fait ?

Parce que "text-align: center;" c'est seulement pour les textes non ?

Centrer les div par rapport à la fenetre du navigateur ?

**SangKou** · 19/12/2005, 15h24

Oui c'est cela !

**SangKou** · 19/12/2005, 15h48

Je pense que c'est à cette façon :

Code :

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

margin: auto;

Et pas

Code :

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

text-align: center;

(pour centrer le DIV au centre du navigateur)

**Linaa** · 19/12/2005, 16h36

Moi j'fais

Code :

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

1
2
	margin-left:auto; 
   margin-right:auto;

**balu** · 19/12/2005, 16h37

Avec les margin auto, il faut définir une largeur au div.

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
<html>
<head>
<title>PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
        text-align: center;
}
 
#global {
        position: relative;
        width: 760px;
        margin: 0 auto 0 auto;
        text-align: left;
        border: 1px solid #000;
}
</style>
</head>
 
<body>
 
<div id="global">
contenu
</div>
 
</body>
</html>

Centrer le contenu du body c'est pour corriger un bug de Internet Explorer.

**SangKou** · 19/12/2005, 16h42

Envoyé par Linaa

Moi j'fais

Code :

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

1
2
	margin-left:auto; 
   margin-right:auto;

Au lieu de margin: auto; ?
C'est mieux ? Pourquoi ?

Envoyé par balu

Avec les margin auto, il faut définir une largeur au div.

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
<html>
<head>
<title>PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
        text-align: center;
}
 
#global {
        position: relative;
        width: 760px;
        margin: 0 auto 0 auto;
        text-align: left;
        border: 1px solid #000;
}
</style>
</head>
 
<body>
 
<div id="global">
contenu
</div>
 
</body>
</html>

Centrer le contenu du body c'est pour corriger un bug de Internet Explorer.

J'ai mis :

Code :

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

1
2
3
4
#cadre
	{
	width: 700px;
	margin: auto;

Cela fera l'affaire ?

**Linaa** · 19/12/2005, 20h56

Envoyé par SangKou

Envoyé par Linaa

Moi j'fais

Code :

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

1
2
	margin-left:auto; 
   margin-right:auto;

Au lieu de margin: auto; ?
C'est mieux ? Pourquoi ?

Ca revient au meme! J'ai mis le minimum...
margin tout seul, implique 'left', 'right', 'top' et 'bottom'

Envoyé par SangKou

J'ai mis :

Code :

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

1
2
3
4
5
 
#cadre
   {
   width: 700px;
   margin: auto;

Cela fera l'affaire ?

T'as essayé ? Normalement c'est bon... Du moment que tu spécifies une largeur!

**balu** · 19/12/2005, 21h45

Envoyé par Linaa

Envoyé par SangKou

J'ai mis :

Code :

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

1
2
3
4
5
 
#cadre
   {
   width: 700px;
   margin: auto;

Cela fera l'affaire ?

T'as essayé ? Normalement c'est bon... Du moment que tu spécifies une largeur!

Le div ne sera pas centré dans Internet Explorer.

Il faut que le conteneur du div (body dans mon exemple) est un alignement centrer et on rétabli l'alignement à gauche sur le div pour corriger ce défaut.

**SangKou** · 19/12/2005, 23h38

Je testais hein ok

Bref, il est bien centré

Tu devras revoir ou bien un petit erreur tout bêtement de ta part !

Je reprécise :

Code :

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

1
2
3
4
#cadre
   {
   width: 700px;
   margin: auto;

Cela se centre bien avec l'IE

**Linaa** · 20/12/2005, 00h40

Je confirme, sans mettre de

Code :

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

1
2
3
body {
   text-align: center;
}

Ca reste centré avec IE!

**balu** · 20/12/2005, 00h49

Envoyé par SangKou

Tu devras revoir ou bien un petit erreur tout bêtement de ta part !

Je reprécise :

Code :

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

1
2
3
4
#cadre
   {
   width: 700px;
   margin: auto;

Cela se centre bien avec l'IE

Pourquoi est-ce que je sens une légère agressivité dans ton message?

Exemple retesté (aucun centrage pour IE)

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
<html>
<head>
<title>PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#cadre {
   width: 700px;
   margin: auto;
   border: 1px solid #000;
}
</style>
</head>
 
<body>
 
<div id="cadre">
contenu
</div>
 
</body>
</html>

Version de IE : 6.0.2900.2180.xpsp_sp2_gdr.050301-1519
La bordure sert seulement pour voir si c'est centré ou non.

Mozilla Firefox centre bien le div.

**Linaa** · 20/12/2005, 01h04

En rajoutant la DOCTYPE, c'est centré

Code :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

**balu** · 20/12/2005, 01h13

Oui, c'est bien centré maintenant.
Merci Linaa d'avoir trouvé mon oubli.

**SangKou** · 20/12/2005, 02h04

Balu >

C'est vrai, sans le DocType, cela ne se centre pas...

Linaa >

En effet

Edit post :

Mince Balu t'as été plus rapide

Centrer la DIV

HTML

Vue hybride

Discussions similaires

Partager

Partager