Comment centrer une image en CSS ?

Télécharger le guide des Regex
Amiel Adamony
Amiel Adamony

Mis à jour :

Publié :

Centrer une image en CSS est une procédure de mise en forme utile pour améliorer l'aspect de la page web. Les différents éléments doivent en effet être disposés de manière harmonieuse, pour un rendu visuel esthétique et conforme à la charte graphique du site. Positionner une image au centre permet également de la mettre en valeur. Plusieurs méthodes permettent de centrer horizontalement et verticalement une image, à l'intérieur de son élément de bloc. Avec la dernière version HTML5, il est recommandé d'utiliser une propriété CSS, appliquée à l'élément image du code HTML.

webdesigner centrant une image en css

Téléchargement  >> Le guide et le modèle pour maîtriser les regex

Centrer des éléments inline vs. block

Une image est un élément HTML. Les éléments étaient historiquement classés en deux types : les éléments inline et les éléments div.

  • Les éléments inline s'insèrent dans le flux du contenu, sans marquer de rupture visuelle.
  • Les éléments block, signalés par exemple par la syntaxe < div >, créent un bloc matérialisé par des sauts de ligne.

comment centrer une image en html: comparaison inline vs block

Sur cette infographie, le bouton « Click me » s'affiche d'abord en tant qu'élément inline, puis en tant qu'élément block. En tant qu'élément inline, le bouton apparaît dans le texte. En tant qu'élément block, le bouton apparaît de manière distincte, avec un saut de ligne avant et après.

L'élément HTML image < img > est un élément de type inline. Pour centrer une image en CSS, quelle que soit la méthode utilisée, il faut donc commencer par la placer dans un élément de type block, tel qu'un < div > : l'image est ainsi centrée, horizontalement ou verticalement, à l'intérieur du bloc.

 

Gagnez du temps dans la gestion de votre code et de vos données

Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.

  • Qu'est-ce qu'une regex ?
  • La structure d'une regex
  • Des astuces d'utilisation
  • Mémento sur les regex
En savoir plus

    Télécharger

    Tous les champs sont obligatoires.

    Merci d'avoir soumis le formulaire

    Cliquez sur le lien pour accéder au contenu en tout temps

     

     

    Centrer une image avec la propriété CSS margin

     

    La propriété CSS margin permet de déterminer la taille des marges de l'élément. C'est-à-dire qu'en fonction de la valeur attribuée à la propriété, le navigateur crée plus ou moins d'espace à l'extérieur de l'élément. C'est la valeur auto qui permet de centrer l'élément.

    La propriété margin ne fonctionne pas avec les éléments de type inline tels que l'élément image < img >. Pour centrer une image avec la propriété margin: auto, il faut donc la convertir en élément de bloc en utilisant une propriété CSS display.

    1. Définir la taille à laquelle afficher l'image, avec la propriété width.
    2. Indiquer la propriété display: block, pour transformer l'image en élément de bloc : un saut de ligne est créé avant et après l'image.
    3. Renseigner la propriété margin: auto. La taille de la marge est identique à droite et à gauche de l'image : l'image est centrée.

    Exemple :

    See the Pen centrer-image-css_margin by HubSpot France (@HubSpot-France) on CodePen.

     

    Centrer une image avec la propriété CSS display: flex

     

    Pour utiliser cette deuxième méthode, il faut d'abord placer l'image dans un élément de bloc de type < div > dans le code HTML. Dans le code CSS, il faut attribuer au < div > les propriétés suivantes :

    1. display: flex, pour indiquer que l'image contenue dans le < div > est flexible.
    2. justify-content: center, pour modifier les dimensions de l'image de manière à la centrer horizontalement.

    Exemple :

    See the Pen centrer-image-css_display-flex by HubSpot France (@HubSpot-France) on CodePen.

    La propriété CSS display: flex permet également de centrer l'image verticalement, à l'intérieur de son élément de bloc, avec la propriété align-items: center. Pour centrer l'image horizontalement et verticalement à l'intérieur de son élément de bloc, il faut attribuer au < div >, dans le code CSS, les propriétés : display: flex, justify-content: center, et align-items: center.

    Dans cet exemple, des bordures ont été ajoutées à l'élément de bloc pour mieux visualiser la position centrale de l'image à l'intérieur de l'élément :

    See the Pen centrer-image-css_display-flex-vertical by HubSpot France (@HubSpot-France) on CodePen.

     

    Centrer une image avec la propriété CSS position

     

    Cette méthode pour centrer une image en CSS nécessite un code plus complexe. L'image < img > est insérée dans un élément de bloc, un < div > par exemple, puis des propriétés sont attribuées à l'élément < div > d'une part, à l'élément < img > d'autre part.

    1. La propriété position: relative est attribuée à l'élément < div >.
    2. L'élément < img > prend les propriétés suivantes : position: absolute, top: 50% et left: 50%. Ces propriétés indiquent au navigateur de positionner le coin supérieur gauche de l'image au centre de la page : l'image n'est pas centrée, c'est son coin supérieur gauche qui l'est. Pour centrer l'image sur la page, il faut alors utiliser la propriété de translation transform: translate, et indiquer les valeurs -50% et -50%.

    Exemple :

    See the Pen centrer-image-css_position by HubSpot France (@HubSpot-France) on CodePen.

     

    Centrer une image avec la balise HTML < center >

     

    Cette méthode permet de centrer une image sans CSS, en utilisant uniquement du code HTML. À noter toutefois que centrer une image avec la balise HTML < center > ne fonctionne que jusqu'à HTML4.

    1. Insérer l'image dans un élément de bloc tel qu'un < div >.
    2. Attribuer à l'élément de bloc < div > la propriété text-align avec la valeur « center ». La syntaxe est la suivante : < div style="text-align: center" >.

    Exemple :

    See the Pen centrer-image-css_balise-center by HubSpot France (@HubSpot-France) on CodePen.


    Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.

    Nouveau call-to-action

    Sujets : CSS

    Articles recommandés

    Fenêtre contextuelle TÉLÉCHARGER LE GUIDE DES REGEX LE GUIDE DES REGEX

    Un gain de temps pour la gestion de contenu.

      Fenêtre contextuelle TÉLÉCHARGER LE GUIDE DES REGEX LE GUIDE DES REGEX

      CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

      START FREE OR GET A DEMO