Maison > interface Web > tutoriel CSS > Comment centrer une image recadrée horizontalement à l'aide de CSS ?

Comment centrer une image recadrée horizontalement à l'aide de CSS ?

Patricia Arquette
Libérer: 2024-10-27 02:57:03
original
521 Les gens l'ont consulté

How to Center a Cropped Image Horizontally Using CSS?

Comment aligner horizontalement une image à l'aide de CSS

Lorsque vous essayez de centrer une image horizontalement, CSS fournit une solution efficace. Dans cette question, l'utilisateur affiche une image en HTML et la recadre en CSS. Ils rencontrent cependant des difficultés pour centrer l'image recadrée.

Pour résoudre ce problème, les règles CSS suivantes peuvent être appliquées :

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

En ajoutant la classe center à l'élément image, il peut être centré horizontalement :

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

Ces règles CSS obtiennent l'effet souhaité en définissant l'image pour qu'elle s'affiche en tant qu'élément de bloc et en ajustant automatiquement les marges gauche et droite. Cela a pour résultat que l'image est centrée dans son conteneur.

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