Maison >interface Web >tutoriel CSS >Comment puis-je centrer horizontalement une image dans une division à l'aide de CSS ?

Comment puis-je centrer horizontalement une image dans une division à l'aide de CSS ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-20 21:18:09222parcourir

How Can I Horizontally Center an Image Inside a Div Using CSS?

Centrer une image horizontalement dans un élément Div

Problème :

Alignement d'une image horizontalement dans son div contenant, l'utilisation de CSS s'est avérée initialement difficile. Les tentatives de centrer l'image à l'aide du CSS existant n'ont pas réussi à produire le résultat souhaité.

Solution :

Pour centrer efficacement l'image, une modification du CSS a été implémentée :

#artiststhumbnail a img {
    display:block;
    margin:auto;
}
  • display:block: Convertit l'image en ligne en un élément de niveau bloc, permettant un contrôle de positionnement supplémentaire.
  • margin:auto: Ajoute automatiquement des marges gauche et droite égales à l'image, en la centrant dans le div.

Résultat :

Ce CSS révisé garantit que l'image dans l'élément div est désormais parfaitement centrée horizontalement, comme souhaité. Une démonstration en direct peut être trouvée ici : http://jsfiddle.net/marvo/3k3CC/2/.

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!

Déclaration:
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