Jak wyśrodkować absolutnie ułożony element w div?

Umieszczenie elementów w HTML i CSS ma kluczowe znaczenie dla strukturyzacji elementów strony internetowej. Dodatkowo CSS „pozycja„Właściwość można wykorzystać do modyfikacji pozycji elementu. Ta właściwość może być używana w połączeniu z atrybutami przesunięcia, w tym właściwości prawe, górne, lewe i dolne, aby zmienić pozycję elementu na stronie.

Ten post zbada procedurę koncentracji elementu, który jest absolutnie umieszczony w DIV.

Jak wyśrodkować absolutnie ułożony element w div?

Aby wyśrodkować absolutnie ułożony element w DIV, omówimy dwie następujące metody:

• Metoda 1: Jak wyśrodkować obraz w stosunku do „Div”?

• Metoda 2: Jak wyśrodkować obraz w stosunku do „ciała”?

Metoda 1: Jak wyśrodkować obraz w stosunku do „Div”?

Aby wyśrodkować obraz w stosunku do div, ustawienie względnej pozycji do pojemnika nadaje elementowi bezwzględne granicę. Mówiąc dokładniej, elementy, które są „absolutny”Są ograniczone przez najbliższego względnego ustawionego rodzica. Ale jeśli żadne z nich nie istnieje, będą one ograniczone przez rzutek.

Krok 1: Dodaj obraz w pliku HTML

Postępuj zgodnie z podanymi instrukcjami wyśrodkowania obrazu względem utworzonego kontenera:

• Po pierwsze, dodaj nagłówek, wykorzystując znacznik nagłówka „

  ". Następnie użyj „styl”Atrybut pomiędzy

  Oznacz i dodaj tekst do nagłówka.

• Następnie zrób „”I przydziel nazwę klasy jako„element pozycji".
• Dodaj obraz za pomocą „”Tag i wstaw„ „src„Atrybut obrazu, który odnosi się do adresu URL obrazu:

Absolutny element pozycji

Można zauważyć, że obraz został pomyślnie dodany w pojemniku Div:

Teraz przejdźmy do części CSS, aby wyśrodkować absolutnie ułożony element w DIV.

Krok 2: Styl „.element pozycji ”

.element pozycji
Wysokość: 350px;
Szerokość: 350px;
Margines: Auto;
Pozycja: względny;
granica: 4px Solid RGB (38, 17, 114);

W wyżej wymienionym kodzie uzyskaj dostęp do „element ustawiony„Klasa za pomocą„.”Selektor i zastosuj podane właściwości:

• "wysokość„Właściwość ustawia wysokość elementu dostępu jako„ 350px ”.
• "szerokość„Nieruchomość jest wykorzystywana do alokacji szerokości„ 350px ”.
• "margines„Własność określa przestrzeń wokół elementu i poza zdefiniowaną granicą.
• "pozycja”Właściwość określa rodzaj metody, która jest ustawiona i używana dla elementu. W powyższym przykładzie pozycja jest ustawiona jako „względny”W celu ustawiania elementu w stosunku do jego normalnej pozycji.
• Następnie, "granica”Służy do definiowania szerokości, stylu linii i koloru granicy wokół elementu.

Krok 3: Styl „.element pozycji IMG ”

Sprawdź dany blok kodu:

.element pozycji IMG
Pozycja: absolutna;
Transform: Tłumacz (-50%, -50%);
Po lewej: 50%;
TOP: 50%;

Tutaj:

• "pozycja”Ustaw jako„ bezwzględny ”, który jest wykorzystywany do umieszczania elementu względem sekcji ciała HTML.
• "przekształcać„Właściwość jest wykorzystywana do modyfikowania przestrzeni współrzędnych modelu formatowania wizualnego za pomocą„Tłumaczyć”Efekt.

• "lewy”Określa poziome ustawienie elementu.
• "szczyt„Przydziela pionową regulację elementu.

Można zaobserwować, że absolutny element ustawiony został wyrównany:

Metoda 2: Jak wyśrodkować obraz w stosunku do „ciała”?

Aby wyśrodkować obraz względem ciała, wypróbuj podane instrukcje:

• Najpierw stwórz nagłówek z „

  ”Tag.

• Następnie dodaj „”Tag i wstaw„ „ID”Atrybut wewnątrz znacznika obrazu. Potem „„src„Atrybut służy do określenia ścieżki obrazu:

Absolutny element pozycji

Styl##pozycja-obraz ”

#pozycja-img
Pozycja: absolutna;
Po lewej: 50%;
Transform: Translatex (-50%);

Uzyskaj dostęp do identyfikatora „Pozycja-img”Za pomocą„#”Selektor i również zastosuj”pozycja”,„lewy", I "przekształcać" nieruchomości.

Wyjście

Zebraliśmy metody wyśrodkowania elementu w div z absolutną pozycją.

Wniosek

CSS „pozycja„Własność jest wykorzystywana do centrowania elementu, który jest absolutnie ustawiony. Jego wartość jest ustalana jako „absolutny„Aby umieścić element w stosunku do jego elementu nadrzędnego, który jest obecnie umieszczony w pobliżu. Ponadto możesz również wykorzystać różne właściwości wraz z właściwością pozycji, takimi jak „”lewy", I "przekształcać„Aby wyśrodkować element. Ten samouczek wykazał procedury wyśrodkowania elementu w div z pozycją bezwzględną.