Comment centrer un groupe d'images avec des légendes en dessous ?

Bonjour à tous,

Je suis face à un problème que je ne parviens pas à résoudre. Je souhaite insérer des vignettes dans un texte, avec une légende en dessous pour un lien. Je souhaiterais avoir l'ensemble de ces vignettes centrées dans le conteneur.

Je parviens à faire 2 choses. Soit j'ai l'ensemble des vignettes+légendes centrées, mais en colonne, les une au dessus des autres, soit j'ai bien les vignettes+légendes alignées comme je souhaite, mais l'ensemble est collé à gauche à cause du float: left.
J'ai essayé de regarder du côté du display: inline mais je n'ai pas trouvé la solution.

Actuellement mon HTML est le suivant (solution en float) :

<div class="bio_thumbs">
<a href="<?php echo $_zp_themeroot; ?>/images/photos/lettre_dessins.jpg">
	<img class="bio_thumb" src="<?php echo $_zp_themeroot; ?>/images/photos/thumbs/t_lettre_dessins.jpg" />
	<p class="legende_bio"><img src="<?php echo $_zp_themeroot; ?>/images/magnifier.png" />Lettre à sa fille</p>
</a>
<a href="<?php echo $_zp_themeroot; ?>/images/photos/chenard_walker.jpg">
	<img class="bio_thumb" src="<?php echo $_zp_themeroot; ?>/images/photos/thumbs/t_chenard_walker.jpg" />
	<p class="legende_bio"><img src="<?php echo $_zp_themeroot; ?>/images/magnifier.png" />Chenard et Walker</p>
</a>
<a href="<?php echo $_zp_themeroot; ?>/images/photos/elephant.jpg">
	<img class="bio_thumb" src="<?php echo $_zp_themeroot; ?>/images/photos/thumbs/t_elephant.jpg" />
	<p class="legende_bio"><img src="<?php echo $_zp_themeroot; ?>/images/magnifier.png" />Elephant</p>
</a>
<a href="<?php echo $_zp_themeroot; ?>/images/photos/pigeon.jpg">
	<img class="bio_thumb" src="<?php echo $_zp_themeroot; ?>/images/photos/thumbs/t_pigeon.jpg" />
	<p class="legende_bio"><img src="<?php echo $_zp_themeroot; ?>/images/magnifier.png" />Pigeon</p>
</a>
<hr class="clear" />

Et comme CSS :

div.bio_thumbs {
	margin: 0 auto; /* ne fonctionne pas car l'élément n'a pas de largeur fixée */
	text-align: center; /* ne fonctionne pas car les éléments sont en float */
}

div.bio_thumbs a {
	float: left;
}

div.bio_thumbs img { /* image loupe */
	vertical-align: middle;
	margin: 0 3px 0 0px;
}

div.bio_thumbs img.bio_thumb { /* autres vignettes */
	margin: 0 10px;
}

p.legende_bio {
	font-size: 12px;
}

hr.clear {
	clear: both;
	visibility: hidden;
}

Ce qui donne :

http://www.luneo.org/temp/images_legendes.jpg

Est-ce que ce que je souhaite faire est faisable sans trop de bidouilles ?

Merci d'avance !

Salut,
Il serait peut être judicieux d'espacer un peu tes éléments les uns des autres avec des margin pour donner l'impression qu'ils sont "centrés". A toi de trouver la valeur idéale en fonction de la taille de ton conteneur principal - la taille de tes vignettes.

Ou si tu veux garder le même espacement entre les vignettes, il faudrait peut être centrer la div qui contient les 4 vignettes et non pas les vignettes elles mêmes.

Ou alors j'ai pas bien compris ton problème...

Salut,

Merci de ta réponse.
En fait j'ai besoin de mettre ces vignettes plusieurs fois dans mon paragraphe, et un nombre qui n'est pas identique à chaque fois. Du coup je connais pas forcément les tailles ni des vignettes ni de l'ensemble, donc je peux pas jouer sur des marges.

Idem, je n'arrive pas à centrer la div qui contient les vignettes, parce qu'elle n'a pas un largeur fixe (je connais pas le nombre de vignettes et leur largeur).

Si tu ne connais pas le nombre d'éléments, tu pourrais essayer display:table-cell; sur les vignettes mais ça ne marche pas sur tous les navigateurs (i.e. IE ) et pas sure que ça fasse l'effet voulu, ou sinon qqch en javascript mais là je peux pas t'aider.