Centrer une image dans un bloc, en CSS

Objectif : en CSS, centrer horizontalement et verticalement une image de dimensions inconnues dans un bloc de taille fixe.

Difficultés : par défaut l’image se place en haut à gauche du bloc, le centrage horizontal peut se faire relativement facilement mais le centrage vertical s’avère plus complexe, et l’image peut se retrouver coupée si elle est plus grande que le cadre.

Mise en œuvre : l’image est placée dans un bloc (div dans notre cas) et nous jouons sur les styles des deux éléments.

<div class="cadreImage">
    <img src="image.jpg" />
</div>

Soit des hauteur et largeur imposées comme demandé.
Le bloc prend le style position: relative;.

.cadreImage {
    height: 300px;
    width: 250px;
    position: relative;
}

L’image a alors le style position: absolute;.
La marge est mise en automatique pour centrer horizontalement ; le placement vertical doit lui être complété en mettant à 0 les propriétés top, bottom, left et right.
Enfin, pour restreindre les images trop grandes sans déformation, on peut donner des valeurs de max-height et max-width.

.cadreImage img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 200px;
    max-width: 150px;
}

Exemple :

Page d’exemple : http://ath0mas.github.com/ExcilysLabs_CentrerImageCSS/

Sources : https://github.com/ath0mas/ExcilysLabs_CentrerImageCSS
VN:R_U [1.9.22_1171]
Rating: 0 (from 0 votes)
Share

À propos de Alexis Thomas

Présent sur LinkedIn et Viadeo.
Ce contenu a été publié dans Trucs & astuces, avec comme mot(s)-clef(s) , . Vous pouvez le mettre en favoris avec ce permalien.

2 réponses à Centrer une image dans un bloc, en CSS

  1. On peut aussi utiliser un margin: auto; pour le centrage horizontal et un margin-top: 50%; padding-top: -100px; où 100px serait la moitié de la hauteur de l’image :)

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Alexis Thomas dit :

    Si je ne me trompe pas, le fait d’utiliser padding-top: -100px; implique justement de connaître par avance la hauteur de l’image. Hors celle-ci peut très bien être inférieure aux 200px max auxquels on la contraint. Je testerai pour vérifier ;).

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)

Laisser un commentaire