Wie man ein absolut positioniertes Element in einem Div zentriert?

Die Positionierung der Elemente in HTML und CSS ist entscheidend für die Strukturierung der Elemente einer Webseite. Zusätzlich die CSS “PositionEigenschaften können verwendet werden, um die Positionen des Elements zu ändern. Diese Eigenschaft kann in Verbindung mit Offset -Attributen verwendet werden, einschließlich rechts, oben, links und unterer Eigenschaften, um die Position des Elements auf der Seite zu ändern.

In diesem Beitrag wird das Verfahren zur Zentrierung eines Elements untersucht, das absolut in einem Div positioniert ist.

Wie man ein absolut positioniertes Element in einem Div zentriert?

Um ein absolut positioniertes Element in einem DIV zu zentrieren, werden wir die folgenden zwei Methoden diskutieren:

• Methode 1: So zentrieren Sie das Bild relativ zu „Div“?

• Methode 2: So zentrieren Sie das Bild relativ zu „Körper“?

Methode 1: So zentrieren Sie das Bild relativ zu „Div“?

Um das Bild zu zentrieren, das relativ zum DIV ist, gibt das Einstellen einer relativen Position in den Behälter das absolute Element eine Grenze zu. Insbesondere Elemente, die sind "absolutWerden durch die nächstgelegene relative Eltern positioniert. Aber wenn nichts davon existiert, werden sie vom Ansichtsfenster begrenzt.

Schritt 1: Fügen Sie das Bild in HTML -Datei hinzu

Befolgen Sie die angegebenen Anweisungen, um ein Bild relativ zum erstellten Container zu zentrieren:

• Fügen Sie zunächst eine Überschrift hinzu, indem Sie das Überschriften -Tag verwenden "

  ”. Verwenden Sie dann das “Stil”Attribut dazwischen

  Tag und fügen Sie den Text für die Überschrift hinzu.

• Als nächstes machen Sie eine “"Und zu, den Klassennamen als" zuweisen "Position-Element”.
• Fügen Sie ein Bild mit der "hinzu"”Tag und fügen Sie die“ ein und “srcBildattribut, das sich auf die URL des Bildes bezieht:

Absolutes Positionselement

Es kann beobachtet werden, dass ein Bild erfolgreich im Div -Container hinzugefügt wurde:

Gehen wir nun in Richtung des CSS -Teils, um das absolut positionierte Element in einem Div zu zentrieren.

Schritt 2: Stil “.Position-Element “

.Position-Element
Höhe: 350px;
Breite: 350px;
Rand: Auto;
Position: Relativ;
Grenze: 4px Solid RGB (38, 17, 114);

Greifen Sie im oben genannten Code auf die “zu“Positionierte Elemente"Klasse, indem Sie die" verwenden ".Selektor und wenden Sie die angegebenen Eigenschaften an:

• “HöheDie Eigenschaft legt die Höhe des Zugriffselements als "350px" fest.
• “BreiteDie Eigenschaft wird zur Zuweisung von „350px“ -Breit verwendet.
• “Rand”Eigenschaft gibt den Raum um das Element und außerhalb der definierten Grenze an.
• “Position”Eigenschaft gibt die Art der Methode an, die für ein Element positioniert und verwendet wird. Im obigen Beispiel wird die Position als “festgelegt“relativ”Zur Positionierung des Elements relativ zu seiner normalen Position.
• Dann, "Grenze”Wird verwendet, um die Breite, den Linienstil und die Farbe des Randes um das Element zu definieren.

Schritt 3: Stil “.Position-Element IMG ”

Schauen Sie sich den angegebenen Codeblock an:

.Position-Element IMG
Position: absolut;
Transformation: Translate (-50%, -50%);
Links: 50%;
Top: 50%;

Hier:

• “Position”Set als„ absolut “, das zum Platzieren des Elements relativ zum Körperabschnitt der HTML verwendet wird.
• “verwandeln„Eigenschaft wird verwendet, um den Koordinatenraum des visuellen Formatierungsmodells mit dem“ zu ändernübersetzen" Wirkung.

• “linksGibt die horizontale Einstellung des Elements an.
• “Spitze”Zugewiesen die vertikale Anpassung des Elements.

Es kann beobachtet werden, dass das absolute positionierte Element in der Mitte ausgerichtet wurde:

Methode 2: So zentrieren Sie das Bild relativ zu „Körper“?

Um das Bild relativ zum Körper zu zentrieren, probieren Sie die angegebenen Anweisungen aus:

• Erstellen Sie zuerst eine Überschrift mit dem “

  " Schild.

• Dann fügen Sie eine hinzu “”Tag und fügen Sie die“ ein und “Ausweis”Attribut im Bild -Tag. Danach das "srcAttribut dient zum Angeben des Bildpfads:

Absolutes Positionselement

Stil „#Position-Image“

#Position-Img
Position: absolut;
Links: 50%;
Transformation: Translatex (-50%);

Zugriff auf die ID “Position-Img"Durch die Verwendung der"#"Selektor und auch anwenden"Position","links", Und "verwandeln" Eigenschaften.

Ausgang

Wir haben die Methoden zusammengestellt, um das Element in einem DIV mit einer absoluten Position zu zentrieren.

Abschluss

Das CSS “PositionImmobilien werden verwendet, um ein Element zu zentrieren, das absolut positioniert ist. Sein Wert wird als "festgelegt"absolutDas Element in Bezug auf sein übergeordnetes Element, das derzeit in der Nähe positioniert ist. Darüber hinaus können Sie auch verschiedene Eigenschaften zusammen mit der Positionseigenschaft nutzen, z. B. “links", Und "verwandeln”Um das Element zu zentrieren. Dieses Tutorial hat die Verfahren gezeigt, um das Element in einem DIV mit der absoluten Position zu zentrieren.