[HTML] Centrer une DIV dans une autre [Fait]

**graphicsxp** · 22/02/2006, 16h09

Bonjour,
Comment dois je faire pour centrer une DIV dans une autre

:
Grossiererment je veux obtenir ca:

Code :

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

1
2
3
4
5
6
 
--------------------------
|       --------------    |
|       |             |      |
|       |-------------      |
|-------------------------

[EDIT]Oula.... oui, tres grossierement alors...

**Johnbob** · 22/02/2006, 16h27

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

**graphicsxp** · 22/02/2006, 16h35

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

**graphicsxp** · 22/02/2006, 16h51

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 :

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

**Johnbob** · 22/02/2006, 16h54

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

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.

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 :

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

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.

**graphicsxp** · 22/02/2006, 17h10

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

Code :

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

<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

.... mais si je mets l'attribut style dans <DIV>, donc j'ai un probleme avec la feuille css visiblement.
Je mets sur

en attendant.
merci

[HTML] Centrer une DIV dans une autre [Fait]

HTML

Discussions similaires

Partager

Partager