Comment centrer une image recadrée horizontalement en 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>

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>

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!