Galerie d'images: contrôler l'alignement

Pour contrôler l'alignement des images et commentaires dans une galerie en plusieurs colonnes et rangées, il faut utiliser des astuces afin de conserver la compatibilité avec tous les navigateurs, et leurs anciennes versions.

Les images sont placées dans une liste avec les balises <li> et la propriété CSS display:inline-block fait qu'elles sont juxtaposées et non plus alignée verticalement sous forme de liste.

Mais pour éviter les débordements, et la remise en cause de la structure quand les images ou le texte ont besoin d'un espace supplémentaire, il faut puiser dans les ressources des feuilles de style...

Le code HTML:

<ul class="gallery">
  <li><img ...><br>texte</li>
  <li>...
</ul>

Une nouvelle liste est créée pour chaque rangée de la galerie.

Le code CSS:

.gallery li
{
  display:inline-block;
  width: 158px;
  min-height: 170px;
  vertical-align:top;
  text-align:center;
  padding:4px;
  zoom:1;
  *display: inline;
  _height: 170px;
  border:none;
}

Démonstration

Explications

Le code suivant définit un cadre pour chaque image avec son texte, avec l'option inline-block, qui fait partie de la spécification CSS 2:

display:inline-block;
width:158px;
min-height:170px;
vertical-align:top;
text-align:center;
padding:4px;

Les autres options sont pour la compatibilité avec les anciens navigateurs.

Ajouter un cadre

On peut modifier la propriété border qui permet en option de créer un cadre, avec par exemple:

 border:1px solid gray;

Voir aussi