Heim > Artikel > Web-Frontend > Wie richtet man Bilder in HTML zentriert aus?
Wie richtet man Bilder in HTML zentriert aus? Der folgende Artikel stellt es Ihnen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Es gibt viele Möglichkeiten, das Bild zu zentrieren. Es gilt als Grundlage für HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 3px solid skyblue;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" style="max-width:90%" / alt="Wie richtet man Bilder in HTML zentriert aus?" >
</div>
</body>
</html>Rendering des obigen Codes:
Methode 1:
img{
position: relative;
left: 50%;
top: 50%;
margin: -60px 0 0 -75px;
}Img-Tag angeben Positionspositionierung festlegen, Position: relativ, links: 50 %; oben: 50 % bedeutet, dass das Element um die halbe Breite des übergeordneten Containers nach rechts und um die halbe Höhe des übergeordneten Containers nach unten verschoben wird, da der verschobene Abstand beträgt Basierend auf dem übergeordneten Container. Es handelt sich um den Standardabstand halber Höhe und Breite. Der Effekt ist wie folgt:
Da dieses Bild größer ist, überschreitet es den Umfang des div. . .
Danach müssen Sie das img-Element nach hinten verschieben, damit das img-Element in der Mitte angezeigt werden kann. Rand: -60px 0 0 -75px; bezieht sich auf das Verschieben des img-Elements um 75px nach links und 60px nach oben (Aufgrund des verwendeten Bildmaterials betragen Breite und Höhe 150*120), sodass das Bild zentriert werden kann.
Methode 2:
img{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}Eigentlich ähnelt dies der oben genannten Methode, aber ich persönlich habe das Gefühl, dass dies der Fall ist Vergleich Praktisch, da die erste Methode ein Problem hat, das heißt, der Randwert muss sich mit der Größe des img-Elements ändern. Es spielt keine Rolle, ob alle img-Elemente gleich groß sind, aber diese Anforderung ist etwas hoch.
Diese Methode verwendet die 2D-Transformation transform: translator (x-Achsen-Bewegungswert, y-Achsen-Bewegungswert). Der Vorteil dieser Methode besteht darin, dass die Breite und Höhe des img-Elements nicht gemessen werden muss und legen Sie den Prozentsatz direkt fest. In transform: Translate() ist der verwendete Prozentsatz tatsächlich relativ zur Breite und Höhe des Elements selbst.
Methode 3:
Als übergeordneten Container mit zwei Ebenen festlegen, Anzeige: Tabelle auf der ersten Ebene festlegen und den übergeordneten Container der ersten Ebene konvertieren in einen Tabellentyp. Legen Sie nach
display: table-cell auf der zweiten Ebene fest, dem übergeordneten Container von img. Legen Sie text-align: center auf der ersten Ebene fest Container,
Durch die Einstellung von Vertical-Align: Middle auf der zweiten Ebene kann der Zweck der Zentrierung des Bildes erreicht werden
Methode 4:
Stellen Sie die Ausrichtung der Haupt- und Seitenachsen ein
<div class="a"> <img src="img/MEIZU.png" alt="Wie richtet man Bilder in HTML zentriert aus?" > </div>
div.a{
width: 600px;
height: 200px;
border: 1px solid saddlebrown;
display: flex;
justify-content: space-around;
align-items: center;
}
div.a img{
border: 1px solid red;
}Stellen Sie display:flex auf den übergeordneten Container ein, um den übergeordneten Container in eine Teleskopbox umzuwandeln, da dies zum Anwenden der Ausrichtung der Haupt- und Seitenachsen erforderlich ist. . . .
Stellen Sie dann die Ausrichtung der Hauptachse auf „justify-content“ ein: space-around;
Hinweis: Internet Explorer 10 und frühere Browser unterstützen das Attribut „justify-content“ nicht.
Hinweis: Safari 6.1 und neuer unterstützt diese Eigenschaft über die Eigenschaft -webkit-justify-content.
Stellen Sie dann die Querachsenausrichtung des übergeordneten Containers ein, align-items: center;
Hinweis: Internet Explorer 10 und frühere Browser unterstützen das align-items-Attribut nicht.
Hinweis: Safari 7.0 und neuer unterstützt diese Eigenschaft über die Eigenschaft -webkit-align-items.
Was sehen Sie? Das Bild ist bereits zentriert.
Wenn Internet Explorer 10 und frühere Browser dies nicht unterstützen würden, wäre diese Methode tatsächlich die am besten geeignete.
Empfohlenes Tutorial:
HTML-TutorialDas obige ist der detaillierte Inhalt vonWie richtet man Bilder in HTML zentriert aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!