Alignement d'images dans plusieurs conteneurs.

bonjour à tous,
je suis un noob dans le css.. et je n'arrive pas à faire ce que je veux.
Voici le site que je suis en train de réaliser.. -> http://www.aikibudo-poitoucharentes.com/joomla/index.php?option=com_content&task=view&id=1&Itemid=18
Sur cette page.. je voudrais ordonner et centrer sur x et y les vignettes dans les conteneurs avec les dégradés en fond. J'ai rentré la taille de mon contener en dur (615px). Or je voudrais que la hauteur soit dynamiqe en fonction du nombre de lignes de photo.
Voici la parti du css concernant les éléments..

.conteneur {

border: 1px solid #ddd;
/*margin: 5px;*/
/*padding-left:26px;*/
width: 615px;
height:auto
margin-left: auto;
margin-right: auto;
background: url('../images/fond-thumb.png') left bottom repeat-x;

}
.spacer {
 	clear: both;
padding-top:5px;
 }
 
 .thumbnail{
	padding: 5px;
	border: 1px solid #ddd;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	overflow: auto;

	}

et la parti du code des images..

<div class="conteneur">
	<div class="thumbnail">
		<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/16.jpg" >
		<img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/16-thumb.jpg" alt="" width="120" height="50" /></a>
		</div>                           
	<div class="thumbnail">
		<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/17.jpg" >
		<img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/17-thumb.jpg" alt="" width="120" height="50" /></a>
		</div>
	<div class="thumbnail">
		<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/18.jpg" ><img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/18-thumb.jpg" alt="" width="120" height="50" /></a>
	</div>
	<div class="thumbnail">
		<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/19.jpg" ><img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/19-thumb.jpg" alt="" width="120" height="50" /></a>
	</div>
	<div class="thumbnail">
			<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/20.jpg" ><img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/20-thumb.jpg" alt="" width="120" height="50" /></a>
	</div>
	<div class="thumbnail">
			<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/4.jpg" ><img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/4-thumb.jpg" alt="" width="120" height="50" /></a>
	</div>
	<div class="thumbnail">
				<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/12.jpg" ><img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/12-thumb.jpg" alt="" width="120" height="50" /></a>
	</div>
	<div class="thumbnail">
					<a href="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/6.jpg" ><img src="http://www.aikibudo-poitoucharentes.com/joomla/images/parthenay/6-thumb.jpg" alt="" width="120" height="50" /></a>
</div>
</div> 

en éspérant que vous pourrez m'aider..
Modifié par freeman (26 Sep 2006 - 00:56)

Bonjours freeman, et bienvenue sur ce forum.

En bon noob que tu es, je suppose que tu t'es précipité sur la FAQ du forum pour y trouver des éléments de réponse ? Si ça n'est pas le cas, voilà quelque chose qui pourrait t'intéresser :
http://forum.alsacreations.com/faq/#item3

Cependant le centrage vertical d'éléments de type en-ligne dans un bloc, lorsque les dimmensions exactes de ces éléments et de ce bloc ne sont pas connues, n'est possible que via l'utilisation d'un tableau, il me semble.

Ici, comme tu ignores le nombre d'éléments à aligner verticalement, il ne sera pas possible de « prévoir » la place exacte des éléments pour les « centrer ».

Mon conseil :
1. Je ne vois pas de contrainte forte pour que ce bloc conteneur ait nécessairement une hauteur figée... j'utiliserais donc une hauteur variable, qui dépend du contenu.
2. Ensuite, on peut créer l'impression de centrage horizontal via l'utilisation de paddings importants (ex : padding: 30px 20px, à appliquer sur le bloc conteneur).
3. Enfin, le centrage horizontal peut se faire tout simplement via un text-align: center (toujours appliqué au conteneur), pourvu que les éléments de contenu soient de type en-ligne.


PS : si besoin, se référer à La structure des balises : bloc et en-ligne.

Merci pour les conseils.. j'ai effectivement utilisé le tableau (je suis plus à l'aise.. )

PS.. : Désolé pour ma réponse tardive.. :s
Modifié par freeman (07 Nov 2006 - 00:39)