Centrer une image dans un conteneur de taille fixe

Voici une manière de centrer une image (élément HTML img dans un conteneur de dimensions (width, height). Ce n’est ni la seule, ni forcément la meilleure, mais c’est une technique relativement simple qui vous sera peut-être utile.

Attention: cette technique ne permet pas un usage avancé comme par exemple centrer un ensemble d’images dans un conteneur, ou centrer une image et un texte d’accompagement (titre, légende) dans un conteneur.

Version simple

Le conteneur de notre image peut être n’importe quel élément de type bloc (div, li, p, etc.). On peut aussi utiliser un élément de type en-ligne, comme un lien (a) ou un span, auquel on donnera un affichage de type bloc grâce à display: block.

Voici donc le code que l’on peut utilisé. J’ai mélangé code HTML et CSS sans distinction, mais vous saurez les placer aux bons endroits (si ce n’est pas le cas, il vous faut revoir les bases avant toute chose!).

<div class="imagebox"><img alt="" src="https://fvsch.com/articles/centrer-image/mon-image.jpg" /></div>

.imagebox {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: lightseagreen;
}
.imagebox img {
    vertical-align: middle;
}

Nous obtenons le résultat suivant:

Une série de vignettes avec intitulé

Je vous propose de construire une petite série de vignettes avec intitulé. C’est une simple application de la technique que nous venons de voir, avec quelques subtilités.

Voici notre code HTML (les points de suspension représentent une répétition: libre à vous de placer autant d’items que vous le souhaitez dans votre liste):

<ul class="imagelist">
    <li>
        <span class="text">Intitulé</span>
        <span class="pict"><img alt="" src="vignette1.jpg" /></span>
    </li>
    <li>
        <span class="text">Autre intitulé</span>
        <span class="pict"><img alt="" src="vignette2.jpg" /></span>
    </li>
    …
    <li>
        <span class="text">Dernier intitulé</span>
        <span class="pict"><img alt="" src="vignette4.jpg" /></span>
    </li>
</ul>

Nous utilisons ici un élément span comme conteneur pour l’image. Nous lui donnons une classe (pict) pour pouvoir le cibler facilement en CSS.

Et voici un exemple de ce qu’on peut faire en CSS à partir de ce code HTML:

.imagelist {
    width: 540px;
    overflow: hidden; /* empêche le dépassement des flottants */
    margin: 0 auto; /* centrage horizontal */
    padding: 0;
    list-style: none;
}
.imagelist li {
    float: left;
    width: 160px;
    margin: 0 10px 30px 10px;
}
.imagelist .pict {
    display: block;
    height: 140px;
    line-height: 140px;
    text-align: center;
}
.imagelist .pict img {
    vertical-align: middle;
}

Vous aurez remarqué qu’il manque le code pour .imagelist .text (c’est à dire le premier span, qui contient l’intitulé accompagnant l’image). Je ne l’indique pas car ce n’est qu’une question d’esthétique, mais rien ne vous empêche de consulter le code source de cette page pour consulter le CSS appliqué à cet élément dans notre deuxième exemple.

Deuxième exemple que voici:

Voilà, nous y sommes. Ou presque: le navigateur Internet Explorer, comme souvent, peine un peu pour centrer nos images. Il va nous falloir faire quelques correctifs.

Correctifs pour Internet Explorer 6 et 7

Le cas IE7

Commençons par Internet Explorer 7, qui nous posera peu de soucis. En effet, avec le code HTML que nous avons utilisé — code parfaitement valide, et correctement compris par tous les navigateurs modernes sauf Internet Explorer —, l’alignement vertical ne se fait pas. Mais si on modifie un simple détail, l’alignement se fait correctement.

Il s’agit simplement de placer un espace (ou une tabulation, ou un retour à la ligne) quelque part entre les balises HTML du bloc parent et la balise HTML de l’image. Par exemple ainsi:

<span class="pict"> <img alt="" src="https://fvsch.com/articles/centrer-image/vignette1.jpg" /> </span>

Voilà un correctif pas trop violent. Cela fonctionne également si on ajoute, plutôt qu’un espace, un caractère de texte ou un élément en-ligne tel qu’un span. Par contre, ne me demandez pas la raison de ce comportement. ;)

Le cas IE6

Tout d’abord, il faut prendre en compte le fameux Doubled Float-Margin Bug. Je ne détaille pas le correctif: voir le code source de cette page, ou plus simplement les explications de Romy sur Quand ça flotte, IE voit double.

Ensuite, il nous faut obtenir le centrage vertical. Et là, c’est un peu plus compliqué. Nous allons utiliser un élément span vide, en display: inline-block.

Nous modifions donc le code HTML ainsi (les retours à la ligne et l’indentation ne sont pas indispensables):

<span class="pict">
    <img alt="" src="vignette1.jpg" />
    <span></span>
</span>

Ensuite, nous appliquons un display: inline-block à ce span, en passant par un commentaire conditionnel pour réserver ce correctif à IE6.

<!--[if IE 6]>
    <style type="text/css">
    /* Correction de l’alignement vertical */
    .imagelist .pict span {
        display: inline-block;
    }
    </style>
<![endif]-->

Là encore, j’aurais du mal à expliquer le fonctionnement de l’astuce. Tentons tout de même une explication: le span en display: inline-block prend une hauteur correspondant au line-height, ce qui suffit à l’image pour se centrer verticalement à côté. Et comme le span a une largeur de 0px, il ne modifie pas l’alignement horizontal.

Notre exemple corrigé

Bien entendu, si vous n’utilisez pas Internet Explorer 6 ou 7 vous ne verrez pas la différence avec l’exemple précédent.