[HTML] Centrer une DIV dans une autre

Version imprimable

22/02/2006, 16h09
graphicsxp

[HTML] Centrer une DIV dans une autre
Bonjour,
Comment dois je faire pour centrer une DIV dans une autre :?:
Grossiererment je veux obtenir ca:
Code:

1 2 3 4 5 6 -------------------------- | -------------- | | | | | | |------------- | |-------------------------
[EDIT]Oula.... oui, tres grossierement alors... :lol:
22/02/2006, 16h27
Johnbob

:faq:

http://web.developpez.com/faq/html/?...orizontalement

Supermodo a fait une recherche et boum:
http://www.developpez.net/forums/vie...light=#2622355

Un petit effort la prochaine fois svp :wink:
22/02/2006, 16h35
graphicsxp

Je sais c'est moi qui est posté le message en question :? lol...
Mais la question est différente puisque cette fois je ne veux pas centrer une div dans la page, mais une div dans une autre... et ce code ne marche pas ou je m'y prends mal... raaaaaaa je hais ce html!!

Voici les déclaration de balises css pour mes deux DIV.
Form c'est pour celle le conteneur, et FormContent pour la div interieure;
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .Form { width: 481px; height: 293px; background-color: inactivecaption; border-right: navy 1px solid; border-bottom: navy 1px solid; border-top: navy 1px solid; border-left: navy 1px solid; margin: 0; text-align: center; } .FormContent { background-color: #F7F6F3; color: #333333; margin-left: auto; margin-right: auto; }
Ca me donne la balise interieure alignée a gauche dans la balise Form, au lieu d'etre centrée :cry:

22/02/2006, 16h54
Johnbob
Citation:

Envoyé par graphicsxp

Je sais c'est moi qui est posté le message en question :? lol...

C'est bien pour ça que je l'ai mis dans mon message en plus de la FAQ ! Tu as doublement fais preuve de fainéantise ;)

Citation:

Envoyé par graphicsxp

ou je m'y prends mal... raaaaaaa je hais ce html!!

Je penche pour cette solution mais c'est vrai que la FAQ aurait pu être plus explicite.

Citation:

Envoyé par FAQ

Structure du code (X)HTML :

<body>

<div id="centrer">

</div>
</body>

Le CSS est le suivant :

body {
margin: 0px;
padding: 0px;
text-align: center; /* pour résoudre le bug de centrage de IE */
}
#centrer
{
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left; /* pour résoudre le bug de centrage de IE */
}

Ce qu'il faut retenir c'est que le conteneur doit avoir la propriété css text-align: center; et le contenu (la chose qui doit être centrée) doit avoir la propriété css margin:0 auto;.

Pour margin:
margin: 0 auto; -> signifie droite = gauche = auto et haut = bas = 0
tu peux aussi faire:
margin: 0 auto 0 auto; -> dans l'ordre: haut droite bas gauche.

J'espère que tu y voit plus clair :)

Dans ton cas:
Code:

1 2 3 4 <div style="text-align:center;"> <div style="margin:0 auto;"> </div> </div>
Il faut limiter le width de ton div contenu sinon il prend tout l'espace disponible.
22/02/2006, 17h10
graphicsxp

ok, c'est plus clair.
Cependant ca ne marche toujours pas.
En fait il y a plusieurs choses bizarres.
Si j'écris:

Code:

<div class="Form" style="width: 481px; height: 293px;">

mon div a la bonne taille.

mais si je mets width et height dans la définition de .Form, le div n'est plus redimensionné :?
Peut etre que lorsque j'aurais réglé ce probleme, le centrage marchera...

[EDIT]
Ha, ca y est tout marche :D .... mais si je mets l'attribut style dans <DIV>, donc j'ai un probleme avec la feuille css visiblement.
Je mets sur :resolu: en attendant.
merci :!: