Posez votre question Signaler

Centrer deux div en milieu d'un div [Résolu]

liyou - Dernière réponse le 18 mars 2008 à 13:53
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:
<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
Lire la suite 

Centrer deux div en milieu d'un div »

10 réponses
Réponse
+1
moins plus
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.
Dalida- 18 mars 2008 à 13:01
oui, c'est à ça que je pensais sachant que tu peux économiser le <div> englobant en mettant {margin:0 auto;} à <body>.
toto7638- 18 mars 2008 à 13:04
Effectivemment sa lui evite la <div> : #global ... si j'ai bien compris ;-)
Ajouter un commentaire
Réponse
+0
moins plus
salut,

ils ne peuvent pas être centrés puisqu'ils flottent à gauche.

peux-tu définir la largeur ?
Ajouter un commentaire
Réponse
+0
moins plus
Si c'est la div "global" que tu veut centrer essaye : margin:auto

Tiens nous au courant.
Ajouter un commentaire
Réponse
+0
moins plus
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...
Ajouter un commentaire
Réponse
+0
moins plus
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.
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>
Ajouter un commentaire
Réponse
+0
moins plus
en fait on se complique la vie pour pas grand chose !

regarde cet exemple.
Ajouter un commentaire
Réponse
+0
moins plus
dsl j n'étais pa la à cause de ma connexion
oui ça marche.... merci beaucoup!!!!!!!!!!!! ;)
Ajouter un commentaire
Réponse
+0
moins plus
Effectivement ça fait beaucoup de div mais je crois que c'est la seule solution !

Ravis de t'avoir aidé. A bientôt sur CCM Dalida et liyou ! ;-)
Ajouter un commentaire
Ce document intitulé « centrer deux div en milieu d'un div » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?