28172 sujets

CSS et mise en forme, CSS3

Centrer une légende d'image

Bonjour,


Après plusieurs semaines de recherche, voici mon premier post sur ce forum..
Promis j'ai vraiment pris la peine de lire les tutoriels sur le positionnement et le centrage, mais je n'arrive toujours pas à centrer une légende sous une image!! Smiley sweatdrop

Alors voilà mon code HTML : 

<body>

<div id="conteneur">	

<div id="contenu">

<div class="imageCentre">
<img alt="bla" title="bla" src="bla.jpg"/>
<p>legende</p> <!-- la légende à centrer -->
</div>

</div> <!-- contenu -->
</div> <!-- conteneur -->
</body>


Et voilà mon CSS : 


body
{
	margin : 10px 0; 			
	font : 90% "Trebuchet MS", Verdana, "Arial", sans-serif;
}

div#conteneur
{
	overflow : auto;
	height : 680px;
	width : 1000px;	
	margin : 0 auto;		
	padding-right : 10px;
	text-align : left;
	border : 2px solid #ab4;
}

div#contenu
{
	margin-right : 15px; 			
	padding-left : 30px ;			
}

div.imageCentre
{
	text-align : center; /* me permet de centrer l'image */
}

div.imageCentre p
{
	margin-top : 3px;
	margin-left : auto;
	margin-right : auto;
}



J'ai lu que pour centrer un élément de type block, il fallait utiliser :

margin-left : auto;
margin-right : auto;


Pourtant, pour centrer l'image, la seule solution qui fonctionne chez moi est : 

div.imageCentre
{
	text-align : center; /* me permet de centrer l'image */
}


Le CSS suivant ne centre en effet pas l'image : 

div.imageCentre img
{
margin-right : auto;
margin-left : auto;
}


Et pour centrer ma légende... ben je n'ai pas trouvé de solution Smiley smile ..


Quelqu'un voit-il l'erreur que j'ai faite?? (en dehors de bidouiller un text-align :center; Smiley sweatdrop )

Merci!
rooroo a écrit :
Quelqu'un voit-il l'erreur que j'ai faite?? (en dehors de bidouiller un text-align :center; Smiley sweatdrop )


Le text-align n'est pas de la bidouille. Smiley decu

Pour faire simple :
- le text-align: center; permet de centrer l'élément inline au sein d'un élément block (son parent) ;
- les marges extérieures automatiques (sur left et right) combinées à une largeur déterminée permet de centrer un élément block.

Revoir les tutoriels d'Alsacréations pour bien comprendre ce mécanisme. Smiley smile
OKi mea culpa, IMG étant une balise inline, text-align:center; permet de la centrer.. Smiley confused

Mais pour la légende, même si je spécifie une largeur dans le CSS, ça ne la centre pas pour autant? 

div.imageCentre p
{
	width : 1000px;
	margin-top : 3px;
	margin-left : auto;
	margin-right : auto;
	padding-left: 0;
}
rooroo a écrit :
Mais pour la légende, même si je spécifie une largeur dans le CSS, ça ne la centre pas pour autant?


Le p (élément block) est centré pas son contenu si il s'agit de centrer son contenu (élément inline) il faut aussi avoir recours à text-align: center;. Smiley cligne
Smiley smile
Bon alors j'ai donc mis : 

div.imageCentre p
{
	margin-top : 3px;
	width : 1000px;   /* pour centrer l'élément p ? */
	margin-left : auto; /* pour centrer l'élément p ? */
	margin-right : auto; /* pour centrer l'élément p ? */
	text-align : center; /* pour centrer son contenu ? */
	padding-left: 0;
}

Mais ça ne bouge toujours pas! Pourtant la balise block p est censée être centrée, et son contenu inline aussi?
Sujet clos
Aller à