So stellen Sie das Bild in HTML auf die Mitte ein

Verwenden Sie in HTML das Randattribut, um das Bild zu zentrieren. Sie müssen nur den Stil „margin:auto“ für das Bildelement festlegen. Wenn der Wert des Randattributs „auto“ ist, weist der Browser automatisch den linken und rechten Rand zu, sodass die Elemente den linken und rechten Rand des übergeordneten Containers gleichmäßig belegen, um den Zweck der Zentrierung des Elements zu erreichen. .

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Erstellen Sie ein img-Tag unter dem Body-Tag und fügen Sie das Bild in die obere linke Ecke des Browsers ein. Die hier angegebene Bildgröße beträgt nun 200*125px

rreee

kann außerhalb von img liegen. Erstellen Sie ein Div-Block-Tag, legen Sie dann die Breite des Div fest und zentrieren Sie die Datei margin:0 auto;

<img src="img/1.jpg" alt="图片">

Sie können das Bild auch auf relative Positionierung einstellen und es dann in Prozent zentrieren,

        <img src="img/1.jpg" alt="图片">

im Browser Da der Abstand von der linken Seite auf 50 % eingestellt ist, befindet sich die linke Seite des Bildes derzeit in der Mitte des Dokuments

Wenn Sie das Bild zentrieren Sie müssen das Bild nach links verschieben. Verschieben Sie die halbe Breite des Bildes, daher müssen Sie die Größe des Bildes kennen. Jetzt beträgt die Größe dieses Bildes 200 * 125, also verschieben Sie einfach den Bildrahmen um 100 Pixel nach links Wenn Sie nach außen gehen, geben Sie einen negativen Wert ein: - 100 Pixel. Der endgültige Effekt ist wie in der Abbildung gezeigt. Nach dieser Einstellung befindet sich das Bild in der Mitte, egal wie groß der Bildschirm ist .

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

Empfohlenes Lernen: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Bild in HTML auf die Mitte ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!