18041 sujets

Questions générales et questions de débutants

Aide pour centrer des div

Salut à tous,

voila j'ai un petit problème, je ne parviens pas à faire centre les div "B" et "C" au milieu du div "A" sachant que ces derniers doivent être sans largeur fixe afin de pouvoir s'adapter au contenu.

Quelqu'un aurait-il une solution?

Merci d'avance pour vos info.

#AA {
	background-color: #F00;
	height: 400px;
	width: 400px;
}
#A {
	background-color: #C6F;
	height: 200px;
	width: 200px;
	margin-right: auto;
	margin-left: auto;
}
#B {
	background-color: #0CF;
	text-align: center;
	float: left;
}
#C {
	background-color: #0CF;
	float: left;
}
</style>
</head>

<body>
<div id="AA">
  <div id="A">
  <div id="B">1</div>
      <div id="C">2</div>
  </div>
</div>
</body>

Modifié par qwertz1 (09 Aug 2011 - 16:56)
Une solution est de remplacer float par un display: inline-block; et un text-align: center; sur le parent (donc A j'imagine)
Merci ça fonctionne! Mais y reste un tout petit problème, c'est que j'ai un petit espace (3 ou 4 px) qui reste entre les 2 div?

Quelqu'un c'est comme je peux le supprimer?
Vite vite comme cela:


body{
  font-size: 1em; /* Servira de référence pour notre unité rem */
}
#A{
  font-size:0; /* on annule les espaces ici donc */
}
#B, #C{
  font-size: 12px; /* la valeur em ne fonctionnera pas puisque le parent a une valeur nulle - fix pour IE */
  font-size: 1rem; /* fait référence à la valeur en em sur body - pour les navigateurs récents */
}


Pour plus d'informations:
http://www.alsacreations.com/article/lire/1209-display-inline-block.html
On peut aussi jouer avec mise a zéro et réinitialisation du word-spacing ou une marge négative latérale d'un -0.5em sur les divs ....

Plusieurs approche sont possible selon les navigateurs ciblés(plus ou moins récents).

GC
Modifié par gc-nomade (09 Aug 2011 - 21:26)
Les marges négatives risquent de lui causer plus d'ennui qu'autre chose, surtout que la taille des caractères invisibles varie selon la police utiliser.
Sujet clos
Aller à