Centrer la DIV

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:

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

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)

Changes align pour text-align.
Code:

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

Effectivement c'était ça :)

Mais pour centrer des div comment on fait ?

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

Citation:

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 ?

Oui c'est cela ! :)

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

Code:

margin: auto;

Et pas

Code:

text-align: center;

(pour centrer le DIV au centre du navigateur)

Moi j'fais

Code:

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

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

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
<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.

Citation:

Envoyé par Linaa

Moi j'fais

Code:

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

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

Citation:

Envoyé par balu

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

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
<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:

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

Cela fera l'affaire ?

Citation:
Envoyé par SangKou
Citation:
Envoyé par Linaa
Moi j'fais
Code:

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'
Citation:
Envoyé par SangKou
J'ai mis :
Code:

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!

Citation:
Envoyé par Linaa
Citation:
Envoyé par SangKou
J'ai mis :
Code:

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.

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:

1 2 3 4 #cadre { width: 700px; margin: auto;
Cela se centre bien avec l'IE

Je confirme, sans mettre de
Code:

1 2 3 body { text-align: center; }
Ca reste centré avec IE!

Citation:
Envoyé par SangKou
Tu devras revoir ou bien un petit erreur tout bêtement de ta part !

Je reprécise :
Code:

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:

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.

En rajoutant la DOCTYPE, c'est centré

Code:

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

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

Balu >

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

Linaa >

En effet ;)

Edit post :

Mince Balu t'as été plus rapide ;)