Comment centrer l'image en HTML

En HTML, utilisez l'attribut margin pour centrer l'image. Il vous suffit de définir le style "margin:auto" sur l'élément image. Lorsque la valeur de l'attribut margin est "auto", le navigateur allouera automatiquement les marges gauche et droite afin que les éléments occupent uniformément les marges gauche et droite du conteneur parent pour atteindre l'objectif de centrage de l'élément. .

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Créez une balise img sous la balise Body et insérez l'image dans le document. Vous pouvez maintenant voir l'image affichée dans le coin supérieur gauche du navigateur. La taille de l'image citée ici est désormais de 200*125px.

<img src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

Vous pouvez créer une balise de bloc div en dehors de l'img, puis définir la largeur du div et centrer le fichier margin:0 auto;

        <img src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

Vous pouvez également définir l'image en positionnement relatif, puis la centrer en pourcentage,

div{
        position:relative;
        left:50%;
    }

pour prévisualiser l'effet dans le navigateur, car le paramètre est à 50 % de la distance du à gauche, alors maintenant Le côté gauche de l'image est au centre du document,

Si vous centrez l'image, vous devez déplacer l'image vers la gauche de moitié la largeur de l'image, vous devez donc connaître la taille de l'image. Maintenant, la taille de cette image est de 200*125, il suffit donc de déplacer le cadre de l'image de 100 pixels vers la gauche. Parce qu'il se déplace vers l'extérieur, donnez-le. une valeur négative à gauche : -100px ; l'effet final est comme indiqué sur la figure, l'image a été alignée au centre, après ce réglage, l'image sera au centre quelle que soit la taille de l'écran.

div{
        position:relative;
        left:50%;
        margin-left: -100PX;
    }

Apprentissage recommandé : tutoriel vidéo HTML

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!