Comment centrer des images avec CSS

Souhaitez-vous 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 le faire en quelques étapes.

Comme pour de nombreuses tâches de conception Web, il existe plusieurs façons d'y parvenir ! Nous aborderons certaines des principales méthodes dans cet article. Commençons! Vérifier Comment modifier des pages Web sur Safari avec Inspect Element.

Comment centrer des images à l'aide de CSS - Instructions

1. Utilisez la fonction de marge

La définition de la propriété margin est l'un des moyens les plus simples de centrer une image horizontalement à l'aide de CSS. Les marges sont un élément essentiel d'un modèle de boîte CSS.

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

En faisant de l'élément d'image un élément de bloc, vous pouvez ensuite 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 choisie, l'image doit avoir des marges égales à gauche et à droite. Vous pouvez facilement y parvenir en donnant à la propriété Margin une valeur automatique :

img.center {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 800px;
}

2. Utilisez la disposition Flexbox

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

<div class=”center”>
 <img src=”xyz.jpg”>
</div>

Une fois que vous avez fait cela, vous pouvez ajouter des propriétés pour contrôler son apparence. Vous utiliserez deux propriétés CSS.

La première est la propriété width avec sa valeur définie sur flex. Vous pouvez également utiliser flex pour aligner des éléments en HTML. La deuxième propriété que vous ajouterez à la div est justifier-content , avec sa valeur définie sur center comme suit :

div.center {
 display: flex;
 justify-content: center;
}

3. Utilisez l'élément de centrage

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. La balise center, 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 la balise img dans la balise centrale comme ceci :

<center>
 <img src=”xyz.jpg”>
</center>

Voici comment aligner vos images HTML

Nous vous avons montré trois façons différentes et faciles à utiliser de 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 de nombreuses autres façons de centrer les images en utilisant HTML et CSS. Une méthode courante qui fonctionne à la fois avec du texte et des images en ligne est la fonction d'alignement du texte. Vous pouvez désormais visualiser Des jeux amusants pour vous aider à apprendre facilement la programmation CSS.

source
Aller au bouton supérieur