Comment centrer des images avec CSS

Vous cherchez à centrer une image à l'aide de CSS? Les problèmes d'alignement sont souvent une source de frustration pour les concepteurs de sites Web. Heureusement, centrer une image avec CSS est très simple, et nous allons vous montrer comment y parvenir en quelques étapes.

Comme pour de nombreuses tâches de conception Web, il existe plusieurs façons d'y parvenir! Nous couvrirons trois méthodes principales dans cet article. Commençons!

1. Utiliser la propriété margin

Réglage de la marge est l'un des moyens les plus simples de centrer horizontalement une image à l'aide de CSS. Les marges sont un élément essentiel de le modèle de boîte CSS.

Tout d'abord, vous devrez transformer l'élément image d'un élément en ligne en un élément en bloc. Les éléments HTML de niveau bloc occupent toute la largeur de leur élément parent et sont capables d'occuper toute la largeur d'une page.

En faisant d'un élément d'image un élément de bloc, vous pouvez alors manipuler sa position en ajustant ses marges horizontales. Vous devrez également définir une largeur spécifique pour l'image, afin de déterminer l'espace occupé par l'image sur la page.

Quelle que soit la largeur que vous choisissez, l'image devra avoir des marges égales à gauche et à droite. Vous pouvez y parvenir facilement en donnant à la propriété margin une valeur de auto:

img.centre {
 bloc de visualisation;
 marge-gauche: auto ;
 marge droite: automatique ;
 largeur: 800 pixels ;
}

2. Utiliser la mise en page Flexbox

Cette méthode nécessite de placer l'image dans un élément de niveau bloc, généralement un div:

Une fois que vous avez fait cela, vous pouvez ajouter quelques propriétés pour manipuler son apparence. Vous utiliserez deux propriétés CSS.

Le premier est le affichage propriété avec sa valeur définie sur fléchir. Vous pouvez aussi utiliser flex pour aligner des éléments en HTML. La deuxième propriété que vous ajouterez à votre div est justifier-contenu, avec sa valeur définie sur centre ainsi:

div.centre {
 affichage: flexible ;
 justifier-contenu: centrer ;
}

3. Utiliser l'élément central obsolète

Les meilleures pratiques Web vous encouragent à utiliser CSS pour le style et HTML pour la sémantique, vous ne devez donc pas utiliser cette méthode HTML. Le centre La balise, qui centre son contenu horizontalement, est obsolète en HTML5.

Mais si vous le devez, voici comment centrer une image en utilisant uniquement HTML. Enveloppez simplement le image balise dans une balise centrale comme ceci :

Voici comment aligner vos images en HTML

Nous vous avons montré trois méthodes différentes et faciles à utiliser pour centrer vos images dans un document HTML. Essayez-les tous et choisissez celui qui vous convient le mieux. Evitez la troisième méthode sauf si vous n'avez absolument pas le choix !

Une chose à garder à l'esprit est qu'il existe plusieurs autres façons de centrer les images en utilisant HTML et CSS. Une méthode courante qui fonctionne à la fois pour le texte et les images en ligne est la aligner le texte biens.

Comment centrer le texte de votre page Web avec CSS

Lire la suite

A propos de l'auteur