Si vous créez vous-même votre site web vous aurez à coup sûr besoin de centrer une image.

Cette action qui peut paraître simple dans l’imaginaire sera bien plus complexe que vous le pensez si vous n’utilisez pas les bonnes techniques. Effectivement, en fonction de la structure de votre code HTML, il ne vous suffira pas toujours d’une simple propriété CSS telle que text-align lorsque vous souhaitez centrer une image.

Heureusement pour nous, il existe plusieurs méthodes en CSS pour centrer horizontalement ou verticalement une image au centre de votre page ou d’un conteneur.

Suivez le guide suivant pour apprendre à centrer à la perfection vos images grâce à quelques lignes en CSS.

Avant de pouvoir centrer l’image, vous devez l’avoir intégrée en HTML.

 

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

Positionnez vos visuels sans effort sur votre site

Le positionnement des images sur une interface web se révèle souvent être un vrai casse-tête. Et il ne faut surtout pas oublier de vérifier que le rendu final est responsive et s’affiche correctement sur tous les écrans et navigateurs !

Gagnez du temps et confiez le design et l’intégration de votre site web à un professionnel.

Postez votre projet sur Codeur.com en précisant votre cahier des charges, puis recevez dans l’heure de nombreux devis de freelances, gratuitement. Echangez avec eux via la messagerie privée pour sélectionner le prestataire qui répond le mieux à vos besoins et à votre budget.

Recevoir des devis (gratuits)

 

Centrer horizontalement une image en CSS

Centrer une image horizontalement est assez simple à réaliser et les méthodes à utiliser pour y arriver sont souvent connues et rapides à mettre en place. Néanmoins, voici un récapitulatif des différentes manières pour centrer vos images horizontalement.

text-align:center

La propriété CSS la plus rapide à utiliser et à mettre en place est text-align avec pour valeur center. Cependant, cela nécessitera que votre balise img soit contenu entre deux balises <div></div> pour appliquer la propriété text-align: center; à l’élément HTML div.

Si votre image est hors d’une div ou dans un élément HTML d’un autre type alors votre image ne sera pas centrée.

Code HTML :


<div>
  <img src="lien-vers-mon-image">
</div>

Code CSS :


div {
  text-align: center;
}

 

À lire aussi : CSS : comment centrer une div ?

margin:auto

Une alternative à text-align: center; et qui fonctionnera même si votre image ne se trouve pas contenue dans un élément div est d’utiliser les propriétés margin-left: auto; et margin-right: auto;.

Grâce à ces deux propriétés, que l’on peut raccourcir en un simple margin: auto;, des marges seront créées automatiquement à gauche et à droite de votre image qui combleront le « vide » et centreront ainsi votre image.

Il existe néanmoins deux prérequis à ce que margin-left: auto; et margin-right: auto; fonctionnent, qui sont :

  1. Définir une largeur, différente de 100%, à votre image
  2. Convertir votre image en élément de type « bloc »

Pour la première condition, il vous faudra simplement utiliser la propriété width sur votre élément img (ou l’uns de ses sélecteur) pour définir une largeur à votre image qui ne soit pas égale à la largeur totale du conteneur (l’écran ou un conteneur HTML) dans laquelle elle se trouve.

Ensuite pour la seconde condition, de base un élément HTML img est un « inline-element » ou « élément en ligne » et vous devez convertir votre image en élément de bloc (block-level element). Pour cela, il suffit d’appliquer la propriété CSS display: block; à votre image.

Une fois ces deux prérequis respectés vous pouvez appliquer margin-left: auto; et margin-right: auto; ou simplement margin: auto; à votre image pour la centrer.

Code HTML :

<img src="lien-vers-mon-image">

Code CSS :


img {
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

 

display:flex

La dernière méthode que nous vous présenterons ici est l’utilisation de display: flex; pour centrer votre image horizontalement.

Tout comme pour text-align cela nécessite que votre image soit à l’intérieur d’un conteneur mais contrairement à la technique avec text-align le conteneur pourra être d’un type différent de div.

Ainsi vous pourrez centrer horizontalement une image qui se trouve dans un élément div, span, p, a ou un quelconque autre élément HTML.

Le conteneur devra avoir les propriétés display: flex; et justify-content: center; qui fonctionnent parfaitement ensemble. L’image quant à elle devra avoir une largeur de définie grâce à la propriété width.

Code HTML :


<conteneur>
  <img src="lien-vers-mon-image">
</conteneur>

Code CSS :


conteneur {
  display: flex;
  justify-content: center;
}

img {
  width: 200px;
}

Vous rencontrez des difficultés à centrer horizontalement un élément CSS sur votre site ? Des développeurs web peuvent vous aider à créer et modifier votre site. Postez votre projet gratuitement sur Codeur.com pour recevoir leurs devis.

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75 000 clients

Trouver un freelance

Centrer verticalement une image en CSS

Un peu moins intuitif, centrer verticalement un élément ou une image peut paraître moins évident que de centrer horizontalement. Heureusement, il existe des méthodes pour réaliser cette opération à la perfection !

 

display:flex (encore une fois)

La propriété display: flex; va nous permettre une nouvelle fois de centrer notre image mais désormais de manière verticale.

Pour rappel, votre image doit être contenue dans un autre élément HTML (son conteneur) qui devra avoir la propriété display: flex; et votre image devra avoir une largeur et une hauteur qui soient toutes les deux inférieures aux dimensions de son conteneur.

Si l’image a des dimensions supérieures à celles de son conteneur alors elle sortira « visuellement » de ce dernier. Donc à moins que cela ne soit voulu, pensez à définir au moins une propriété width sur votre image mais cela reste facultatif pour centrer verticalement l’image.

Ensuite, la dernière étape pour centrer verticalement votre image est d’appliquer à son conteneur la propriété align-items: center;.

Vous pouvez aussi y appliquer la propriété justify-content: center; ainsi vous centrerez votre image verticalement et horizontalement.

Code HTML :

<conteneur>
  <img src="lien-vers-mon-image">
</conteneur>

Code CSS :

conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}

img {
  width: 200px;
}

 

position:absolute et propriété « transform »

Il existe une autre méthode, certes un peu plus complexe, pour centrer votre image verticalement.

Cette façon de faire demande plus de compréhension et mise en place techniques, mais nous allons de nouveau vous guider à travers l’utilisation de cette technique.

  1. Dans un premier temps, vous devez avoir un conteneur avec un position « relative ». Pour cela, utilisez la propriété position: relative; sur votre conteneur. Dans notre exemple, nous donnerons à notre conteneur une hauteur de 300px :
  2. Ensuite, votre image devra se trouver à l’intérieur du conteneur précédemment créé et avoir une position définie en « absolue » avec la propriété CSS position: absolute;
  3. Après cela, vous devrez déplacer la position initiale de votre image à 50% du bord supérieur de son conteneur. Cela déplacera les coordonnées de départ de votre image vers le milieu vertical de son conteneur.
  4. Pour finir, il vous faudra déplacer le centre de l’image vers le milieu vertical du conteneur. Appliquez une transformation sur l’axe horizontal et vertical, X et Y, respectivement de 0% et de -50% à votre image.

Code HTML :

<conteneur>
  <img src="lien-vers-mon-image">
</conteneur>

Code CSS :

conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}

img {
  width: 200px;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}

Si vous le souhaitez, vous pouvez aussi centrer horizontalement et verticalement grâce à cette méthode. Dans ce cas, il vous suffit simplement de modifier la position initiale de l’image à 50% du côté gauche de son conteneur et d’ajouter une transformation de -50% sur l’axe horizontal (X) de l’image.

Code CSS :

conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}

img {
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

Exemples concrets pour centrer horizontalement et verticalement

Vous pouvez retrouver des exemples de toutes les techniques expliquées et mises en œuvre dans ce guide en vous rendant sur https://codepen.io/codeur-com/pen/PoRVZJd

 

Conclusion

Les propriétés CSS permettent de centrer une image assez facilement et sans trop de contraintes dans n’importe quelle situation. La méthode à employer dépendra généralement de la structure de votre code HTML, des autres propriétés CSS employées sur votre site et éventuellement de vos préférences.

Testez par vous-même chaque méthode expliquée dans ce guide et si vous préférez déléguer la création visuelle de votre site, n’hésitez donc pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un développeur web freelance.

Si vous possédez un site e-commerce, pensez à ajouter un zoom sur vos photos pour permettre aux visiteurs de voir les détails de vos produits. Vous pouvez aussi ajouter des effets CSS sur vos images, comme par exemple afficher des images rondes ou créer un diaporama.

Vous souhaitez centrer une image de fond ? Découvrez notre tutoriel sur la gestion du background en CSS !