Centrer deux div en milieu d'un div
Résolu
liyou
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
c'est la première fois que je teste des div et j'ai un petit problème :
dans page html:
j'ai 3 div, le premier div global englobe deux div a1 et a2 et ils sont à côtés de l'autre, j'ai utilisé deux fichiers html et l'autre css.
voici le code html:
et le css:
le probleme en utilisant ce code, les 2 div a1 et a2 ne se centrent pas meme si j'ai mis dans div global text-align:center
merci d'avance
c'est la première fois que je teste des div et j'ai un petit problème :
dans page html:
j'ai 3 div, le premier div global englobe deux div a1 et a2 et ils sont à côtés de l'autre, j'ai utilisé deux fichiers html et l'autre css.
voici le code html:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <link rel="stylesheet" href="s.css" type="text/css"/> </head> <body> <div id="global"> <div id="a1"></div> <div id="a2"></div> </div> </body> </html>
et le css:
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#global
{
background-color:#CCCCCC;
width:100%;
height:100px;
text-align:center;
}
#a1
{
background-color:#0099FF;
height:100px;
width:200px;
float:left;
}
#a2
{
background-color:#009900;
height:100px;
width:400px;
float:left;
}
le probleme en utilisant ce code, les 2 div a1 et a2 ne se centrent pas meme si j'ai mis dans div global text-align:center
merci d'avance
A voir également:
- Centrer div dans div
- Div c++ - Télécharger - Langages
- Remplacer #div/0 par vide - Forum Bureautique
- Ne pas afficher #DIV!0 sur une plage de cellu - Forum Bureautique
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? - Forum C
- Fusionner et centrer excel grisé ✓ - Forum Excel
8 réponses
Et si tu crées une div englobement qui englobe a1 et a2, que tu specifie de width:600px et de margin:auto
Bien sur tu conserve float:left pour a1 et a2 .
Comme ça a1 et a2 seront collés et la div "englobement" sera centré !
Je c'est pas si j'ai été clair la !
Si tu comprends pas dit le moi et je mettrais le code.
Toto.
Bien sur tu conserve float:left pour a1 et a2 .
Comme ça a1 et a2 seront collés et la div "englobement" sera centré !
Je c'est pas si j'ai été clair la !
Si tu comprends pas dit le moi et je mettrais le code.
Toto.
Dalida
Messages postés
6728
Date d'inscription
Statut
Contributeur
Dernière intervention
922
oui, c'est à ça que je pensais sachant que tu peux économiser le <div> englobant en mettant {margin:0 auto;} à <body>.
Utilisateur anonyme
>
Dalida
Messages postés
6728
Date d'inscription
Statut
Contributeur
Dernière intervention
Effectivemment sa lui evite la <div> : #global ... si j'ai bien compris ;-)
non ça ne fonctione pas margin: auto
la largeur de a1 est de 200px
la largeur de a2 est de 400px
vous avez raison à propos du flotement à gauche, mais je veux que div a1 et a2 reste à côté de l'autre et centré aussi...
la largeur de a1 est de 200px
la largeur de a2 est de 400px
vous avez raison à propos du flotement à gauche, mais je veux que div a1 et a2 reste à côté de l'autre et centré aussi...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
non, s'il y a un flottement ça ne prendra pas.
essaie plutôt de centrer le <div> global et d'aligner les <div> contenus en changeant leur rendu.
<edit>
pas la peine d'essayer ça ne prendra pas la largeur fixe.
sais-tu déjà quel contenu tu auras ?
une liste de liens à gauche je suppose ?
</edit>
essaie plutôt de centrer le <div> global et d'aligner les <div> contenus en changeant leur rendu.
body
{
margin:0 auto;
}
#global
{
}
#a1
{
width:200px;
display:inline;
}
#a2
{
height:100px;
width:400px;
display:inline;
}
<edit>
pas la peine d'essayer ça ne prendra pas la largeur fixe.
sais-tu déjà quel contenu tu auras ?
une liste de liens à gauche je suppose ?
</edit>
