Maison > interface Web > tutoriel CSS > Comment centrer une image recadrée horizontalement en CSS ?

Comment centrer une image recadrée horizontalement en CSS ?

Mary-Kate Olsen
Libérer: 2024-10-29 18:41:37
original
950 Les gens l'ont consulté

How to Center a Cropped Image Horizontally in CSS?

Centrer une image horizontalement avec CSS

Lors de l'affichage d'une image sur une page Web, il est souvent souhaitable de l'aligner horizontalement au centre. Cependant, recadrer une image pour n'en afficher qu'une partie peut compliquer ce processus.

Dans le code HTML fourni, vous utilisez clip pour recadrer l'image, mais vous rencontrez des difficultés pour centrer l'image recadrée. Voici une solution à votre problème :

Solution :

Pour centrer une image recadrée horizontalement, vous pouvez utiliser les propriétés CSS margin-left et margin-right. Voici le code mis à jour :

<code class="css">.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}</code>
Copier après la connexion

Ajoutez l'attribut class="center" à l'image que vous souhaitez centrer :

<code class="html"><div id="loading" class="loading-invisible">
  <img class="loading center" src="logo.png">
</div></code>
Copier après la connexion

Explication :

  • La propriété display: block garantit que l'image occupera toute la largeur de son élément parent.
  • Les propriétés margin-left et margin-right: auto définissent les marges gauche et droite sur " auto", qui répartit automatiquement l'espace restant uniformément autour de l'image, en la centrant efficacement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal