Centrer horizontalement PLUSIEURS blocs

Bonjour,

Cela fait maintenant plusieurs heures que je suis sur ce problème. Je craque car je ne vois vraiment pas comment faire. Pourtant cela parait simple...

Voilà le problème:
Je voudrait tout simplement centrer horizontalement plusieurs blocs dans une page, chaque bloc étant constitué d'1 titre et d'une image.


Contraintes:
- la largeur d'un bloc est connue: 100 pixels
- la largeur de la page n'est pas connue.
- l'image se trouve sous le titre (autrement dit: titre et image sont en mode bloc, non en mode inline).

Voilà, c'est tout. C'est simple non?
Eh bien impossible: j'ai l'impression que le fait de ne pas connaitre la taille du container de ces blocs m'empêche de les centrer !!!

Voilà le code HTML:

    <div class="toolbar">
      <div class="item"><h5>Titre</h5><img src="images/monimage.jpg" width="100" height="72"/></div>
      <div class="item"><h5>Titre</h5><img src="images/monimage.jpg" width="100" height="72"/></div>
      <div class="item"><h5>Titre</h5><img src="images/monimage.jpg" width="100" height="72"/></div>
    </div>

Et le code CSS que je pensais mettre mais qui ne marche pas du tout...

      .toolbar {
          border: 1px solid;
          text-align: center;
      } 
	  .item {
          border: 1px solid;
	  width: 100px;
	  display: inline;
      }
	  h5 {
  	margin: 0;
	padding: 0;
	  }

Voilà, je ne comprends vraiment pas pourquoi ces fichus blocs ne se retrouvent pas centrés horizontalement sur ma page...

Merci d'avance pour votre aide !!!

Hello,

Pour commencer, je me permettrais une petite remarque sur ton balisage. Je pense que la liste <ul> est sémantiquement plus appropriée que plusieurs <div> (ce que tu souhaites faire ressemble à une simple galerie, une liste de vignettes).

Le code XHTML ressemblerait alors à cela :

<ul class="toolbar">
     <li>
          <h5>Titre</h5>
          <img src="img.jpg" alt="Description alternative"/>
     </li>
     [...]
</ul>

Et n'oublie pas l'attribut "alt" sur les images (accessibilité, référencement, validation).

Les attributs "width" et "height" que tu as précisé sont inutiles, les tailles des images seront fixées dans le code CSS, ça rendra les mises à jour du site plus simple.

Pas besoin non plus de classe "item", on ciblera les éléments en passant par la classe "toolbar", définie sur <ul>.

Concernant le centrage horizontal, le plus simple actuellement est d'utiliser un "margin:0 auto" sur le <ul>. Par contre pour que cela fonctionne, il faut impérativement lui passer une largeur avec "width". Et pour placer côte à côte les éléments de la liste, du "float:left"...

Pour 3 éléments, le code CSS final pourrait ressembler à ça :

ul.toolbar {
width:300px; /* 3 éléments de 100px */
margin:0 auto; /* centrage horizontal */
overflow:hidden; /* [url=http://covertprestige.info/test/03-elements-flottants-et-element-parent-1.html]Pour éviter que les éléments flottants ne dépassent de l'élément parent[/url] */}

ul.toolbar li {
float:left;
width:100px; }

ul.toolbar li img {
width:100px;
height:72px; }

Mais tu l'auras compris, cette méthode manque de souplesse et peut poser problème dans le cas où les vignettes sont affichées dynamiquement.

Bon courage.
Modifié par BeliG (09 Mar 2009 - 14:42)

Rebonjour,

En effet, je prévoyais de mettre des balises UL / LI par la suite, mais pour un souci de clarté dans ce message, je me suis dis qu'il était préférable de commencer avec des balises DIV (et aussi pour modifier le moins possible le comportement par défaut des éléments).

Merci pour ta réponse, mais, malheureusement, elle ne me convient pas.
Car comme tu l'indiques en fin de message, mes vignettes sont affichées dynamiquement et je ne peux pas connaitre la taille (largeur) de mon container de vignettes.

J'avais bien pensé à utiliser du float mais cela oblige en effet à connaitre la largeur du container...

C'est frustrant car le problème ne me parait pas insoluble...

phildici a écrit :
Car comme tu l'indiques en fin de message, mes vignettes sont affichées dynamiquement et je ne peux pas connaitre la taille (largeur) de mon container de vignettes.

Dans ce cas une alternative serait de calculer et de passer dynamiquement la largeur du <ul> (en fonction du nombre d'élément généré).

<ul class="toolbar" style="width:<?php echo $largeur; ?>px;">

LA solution au centrage horizontal de plusieurs éléments de type bloc, c'est le display:inline-block. Mais les navigateurs actuels le supportent mal (IE 6 et 7) ou pas du tout (Firefox 2).

Florent nous expose tout de même quelques solutions (je t'avais déjà donné ce lien dans mon premier message), mais c'est à mon avis trop compliqué et pas adapté la plupart du temps. A toi de voir.

OK, merci, je vais lire l'article que tu m'as indiqué.
Et à défaut j'ajouterai ce paramétrage PHP ou Javascript.

Merci pour ton aide en tout cas !

Après lecture de l'article et quelques essais, je garde l'astuce indiquée.
Cela fonctionne très bien et cela m'évite de rajouter du code serveur au milieu de code client.

Merci pour l'info !

[Résolu], donc ?