Si vous Créez votre propre site Web Vous devrez probablement centrer une image.

Cette action, qui semble simple dans l’imagination, est beaucoup plus complexe que vous ne le pensez si vous n’utilisez pas les bonnes techniques. Selon la structure de votre code HTML, une simple propriété CSS telle que: text-align lorsque vous souhaitez centrer une image.

Heureusement, il existe plusieurs façons en CSS de centrer une image horizontalement ou verticalement au milieu de votre page ou de votre conteneur.

Suivez le guide ci-dessous pour apprendre à centrer parfaitement vos images avec seulement quelques lignes en CSS.

Soumettez gratuitement votre projet à Codeur.com, recevez quinze devis et choisissez le développeur web idéal.

Trouver un développeur Web

Centrer une image horizontalement en CSS

Centrer une image horizontalement est assez simple, et les méthodes par lesquelles cela peut être réalisé sont souvent connues et rapides à mettre en place. Cependant, voici un tour d’horizon des différentes façons de centrer vos images horizontalement.

Alignement du texte: centre

La propriété CSS la plus rapide à utiliser et à configurer est text-align avec pour valeur center. Cependant, cela suppose votre journée img soit contenu entre deux balises <div></div> appliquer la propriété text-align: center; à l’élément HTML div.

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

Code HTML:


<div>
  <img src="https://www.codeur.com/tuto/css/centrer-image-css/lien-vers-mon-image">
</div>

Code CSS:


div {
  text-align: center;
}

Marge: Auto

Une alternative à text-align: center; et cela fonctionne même si votre image n’est pas dans un élément div est d’utiliser des propriétés margin-left: auto; et margin-right: auto;.

Grâce à ces deux propriétés qui peuvent être raccourcies à une simple margin: auto;Des marges sont automatiquement créées à gauche et à droite de votre image, qui comblent le « vide » et ainsi centrent votre image.

Cependant, il y a deux conditions pour margin-left: auto; et margin-right: auto; Des travaux qui sont:

  1. Définissez une largeur autre que 100% pour votre image
  2. Convertissez votre image en un élément de type « bloc »

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

Puis basez un élément HTML pour la deuxième condition img est un «élément en ligne» ou un «élément en ligne» et vous devez convertir votre image en un élément de niveau bloc. Pour ce faire, appliquez simplement la propriété CSS display: block; dans votre image.

Dès que ces deux conditions sont remplies, vous pouvez postuler margin-left: auto; et margin-right: auto; ou simplement margin: auto; dans votre image pour le centrer.

Code HTML:

<img src="https://www.codeur.com/tuto/css/centrer-image-css/lien-vers-mon-image">

Code CSS:


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

Affichage: flex

La dernière méthode que nous allons vous présenter ici est d’utiliser display: flex; pour centrer votre image horizontalement.

Juste comme pour text-align Cela nécessite que votre image soit dans un conteneur, mais différente de la technique avec text-align Le conteneur peut être d’un type différent de celui div.

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

Le conteneur doit avoir les propriétés display: flex; et justify-content: center; cela fonctionne parfaitement ensemble. L’image doit avoir une largeur définie par la propriété width.

Code HTML:


<conteneur>
  <img src="https://www.codeur.com/tuto/css/centrer-image-css/lien-vers-mon-image">
</conteneur>

Code CSS:


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

img {
  width: 200px;
}

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

Trouvez le meilleur développeur Web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans engagement

Déjà plus de 75000 clients

Trouvez un pigiste

Centrer une image verticalement en CSS

Un peu moins intuitif pour centrer un élément ou une image verticalement semble moins évident que de le centrer horizontalement. Heureusement, il existe des moyens de le faire parfaitement!

Affichage: flex (encore)

La propriété display: flex; nous permettra à nouveau de centrer notre image verticalement mais maintenant.

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

Si l’image est plus grande que le contenant, elle émergera « visuellement » de ce dernier. Si ce n’est pas ce que vous voulez, vous devez définir au moins une propriété width sur votre image, mais cela reste facultatif pour centrer l’image verticalement.

La dernière étape du centrage vertical de votre image consiste à appliquer la propriété au conteneur. align-items: center;.

Vous pouvez également appliquer la propriété justify-content: center; De cette façon, vous centrez votre image verticalement et horizontalement.

Code HTML:

<conteneur>
  <img src="https://www.codeur.com/tuto/css/centrer-image-css/lien-vers-mon-image">
</conteneur>

Code CSS:

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

img {
  width: 200px;
}

Position: propriété absolue et « transformée »

Il existe une autre façon, certes plus complexe, de centrer votre image verticalement.

Cette procédure nécessite une compréhension et une pratique plus techniques, mais nous vous expliquerons à nouveau l’utilisation de cette technique.

  1. Tout d’abord, vous avez besoin d’un conteneur avec une position « relative ». Pour ce faire, utilisez la propriété position: relative; sur votre conteneur. Dans notre exemple, nous donnons à notre conteneur une hauteur de 300px:
  2. Ensuite, votre image doit être à l’intérieur du conteneur précédemment créé et avoir une position définie comme « absolue » avec la propriété CSS position: absolute;
  3. Après cela, vous devez déplacer la position de départ de votre image à 50% du haut du conteneur. Cela déplacera les coordonnées de départ de votre image vers le point central vertical du conteneur.
  4. Enfin, vous devez déplacer le centre de l’image vers le centre vertical du conteneur. Appliquez une transformation aux axes horizontal et vertical X et Y de 0% et -50%, respectivement, à votre image.

Code HTML:

<conteneur>
  <img src="https://www.codeur.com/tuto/css/centrer-image-css/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%);
}

Vous pouvez également utiliser cette méthode pour centrer horizontalement et verticalement si vous le souhaitez. Dans ce cas, tout ce que vous avez à faire est de changer la position de départ de l’image sur le côté gauche du conteneur à 50% 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 de centrage horizontal et vertical

Pour obtenir des exemples de toutes les techniques décrites et mises en œuvre dans ce guide, voir https://codepen.io/pen/?template=qBaOmLa

Conclusion

Les propriétés CSS vous permettent de centrer facilement une image dans n’importe quelle situation sans trop de restrictions.

La méthode à utiliser dépend généralement de la structure de votre code HTML, des autres propriétés CSS utilisées sur votre site et éventuellement de vos préférences.

Essayez vous-même chacune des méthodes décrites dans ce guide. Si vous préférez déléguer la création visuelle de votre site Web, n’hésitez pas à publier une annonce gratuite Codeur.com pour trouver rapidement un développeur web indépendant.

Souhaitez-vous centrer une image d’arrière-plan? Découvrir notre tutoriel sur la gestion d’arrière-plan en CSS !



Source link

Recent Posts