Centrer des conteneurs (nb variable selon page) par CSS

Bonsoir à tous,

Je suis en train de convertir mon site web en CSS (fait sous Dreamweaver, donc fonctionnel et rapide, mais pas forcément standardisé).


Les liens suivants vous seront utiles pour comprendre la mise en page souhaitée.
http://loiseauquisortdeleau.free.fr/spectacles.htm
http://loiseauquisortdeleau.free.fr/photos.htm

Le problème sur lequel je bute est le suivant : j'aimerai centrer sur une même ligne plusieurs blocs contenant une image et un titre/lien se rapportant à cette image.

La difficulté vient de :
(1) arriver à faire cela ne serait-ce que pour une page (3 blocs -> largeur fixé à 33% et float)
(2) arriver à faire cela via des CSS qui s'appliqueraient qu'il y ait 1 - 2 - 3 - 4 blocs.

Cette dernière difficulté est bien sûr mon vrai but.

Si vous avez des suggestions sur la logique, je me débrouillerai ensuite pour faire le code.

Après avoir réfléchi en menu, j'ai opté pour le code ci-dessous.

Le HTML

<div id="elementcentre">
	<div class="boiteacentrer">
		<p class="imageacentrer"><img src="images/AffCortoCircuitoWeb.jpg" /></p>Titre_1
	</div>
	<div class="boiteacentrer">
		<p class="imageacentrer"><img src="images/LuciaWeb01.jpg" /></p>Titre_2
	</div>
	<div class="boiteacentrer">
		<p class="imageacentrer"><img src="images/AfficheSpectCestvrai_thumb.jpg" /></p>Titre_3
	</div>
</div>

Le CSS

#elementcentre {
	width: auto;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	background-color: #FF0000;
}

.boiteacentrer {
	text-align: center;
	background-color: #66FF33;
	margin-right: auto;
	margin-left: auto;
	width: auto;
}

.imageacentrer {
	text-align: center;
	background-color: #6633FF;
}

Merci d'avance pour vos idées.

guiliguili
Modifié par guiliguili (06 Aug 2006 - 21:03)