28172 sujets

CSS et mise en forme, CSS3

Bonjour, voici mon soucis:

J'ai un div "parent" qui doit en même temps:
- s'ajuster à la taille du div qu'il contient ("child1")
- être centré en largeur dans la page

Voici le code:
<div id="parent">
	<div id="child1">
		<img src="test.png" width="410px" height="255px" />
	</div>
</div>


Et le css:
#parent{
	position:absolute;
	margin: 0 auto;
	height:auto;
	background:#FF8;
	padding:10px 10px 50px 10px;
	text-align:center;
}

#child1{
	background:#F8F;
	padding:2px;
}


J'ai réussi à résoudre le premier problème en ajoutant "position:absolute;" à mon div "parent", mais le probléme c'est que du coup, je ne peux plus utiliser "margin: 0 auto;" pour le centrer.
Et je ne peux pas non plus utillisé "top:50%;" avec "margin-left=width/2" car que je ne connais pas la width (vu qu'elle est sencé s'ajuster automatiquement)...

Pour info, je ne connais pas à l'avance les dimensions de l'image contenue dans "child1" car elle est chargée en Javascript. Bon, si je trouve pas de solution, je piloterai toutes les largeurs et les left en javascript au moment du chargement de la photo, mais le but c'est d'avoir simplement la taille de l'image à renseigner en javascript et que tout le reste s'ajuste en fonction pour minimiser le traitement.

Merci pour votre aide.
Modifié par FLoR1aN (22 Mar 2012 - 19:09)
Une solution parmi d'autres : parent -> text-align:center, child -> display:inline-block. Tu pouvais aussi utiliser un span pour le child.
Modifié par jb_gfx (22 Mar 2012 - 19:57)
J'ai essayé tes 2 solutions mais ça ne marche pas.
Je fais avec le parent en position relative ou absolue?
Bonjour,

il me semble que la propriété + valeur display: table-cell résoudrait ton problème d'ajustement de la largeur du bloc parent, mais avec cette valeur, je ne sais pas si tu pourras le centrer horizontalement (peux pas vérifier maintenant).

Pour les différentes valeurs de display :

Display, vous connaissez ?
FLoR1aN a écrit :
J'ai essayé tes 2 solutions mais ça ne marche pas.
Je fais avec le parent en position relative ou absolue?


Aucune des deux. En tout j'ai testé et ça fonctionne bien.