Hvordan sentrerer et absolutt plassert element i en div?

Plasseringen av elementene i HTML og CSS er avgjørende for å strukturere elementene på en webside. I tillegg er CSS “posisjonEiendom kan brukes til å endre elementets posisjoner. Denne egenskapen kan brukes i forbindelse med forskyvningsattributter, inkludert høyre, øverste, venstre og bunnegenskaper, for å endre elementets plassering på siden.

Dette innlegget vil undersøke prosedyren for å sentrere et element som absolutt er plassert i en div.

Hvordan sentrerer et absolutt plassert element i en div?

For å sentrere et absolutt plassert element i en div, vil vi diskutere følgende to metoder:

• Metode 1: Hvordan sentrum av bildet i forhold til “Div”?

• Metode 2: Hvordan sentrum av bildet i forhold til “Body”?

Metode 1: Hvordan sentrum av bildet i forhold til “Div”?

For å sentrere bildet som er relativt til div, gir den relative posisjonen til beholderen det absolutte elementet en grense. Mer spesifikt elementer som er “Absolutt”Er begrenset av den nærmeste relative foreldre plassert. Men hvis ingenting av det eksisterer, vil de bli avgrenset av Viewport.

Trinn 1: Legg til bilde i HTML -fil

Følg de gitte instruksjonene for å sentrere et bilde i forhold til den opprettede beholderen:

• Først av alt, legg til en overskrift ved å bruke overskriften -taggen "

  ”. Bruk deretter “stil”Attributt mellom

  Merk og legg til teksten for overskriften.

• Neste, lag en “”Og tildel klassenavnet som“Posisjonelement”.
• Legg til et bilde ved hjelp av “”Tag og sett inn“src”Bildeattributt som refererer til nettadressen til bildet:

Absolutt posisjonselement

Det kan observeres at et bilde har blitt lagt til i DIV -beholderen:

La oss nå bevege oss mot CSS -delen for å sentrere det absolutt plasserte elementet i en div.

Trinn 2: Stil “.posisjonselement ”

.posisjon-element
Høyde: 350px;
Bredde: 350px;
Margin: Auto;
Posisjon: relativ;
Grense: 4px Solid RGB (38, 17, 114);

I den ovennevnte koden får du tilgang til “posisjonert element”Klasse ved å bruke“.”Valg og bruk de gitte egenskapene:

• “høyde”Eiendom setter høyden på tilgangselementet som“ 350px ”.
• “bredde”Eiendom brukes til å tildele“ 350px ”bredde.
• “margin”Eiendom spesifiserer plassen rundt elementet og utenfor den definerte grensen.
• “posisjon”Eiendom spesifiserer hvilken type metode som er plassert og brukt for et element. I eksemplet ovenfor er stillingen satt som "slektning”For å plassere elementet i forhold til dets normale posisjon.
• Deretter, "grense”Brukes til å definere bredde, linjestil og farge på grensen rundt elementet.

Trinn 3: Stil “.Posisjon-element IMG ”

Sjekk ut den gitte kodeblokken:

.posisjon-element img
Posisjon: Absolutt;
Transform: Oversett (-50%, -50%);
Venstre: 50%;
Topp: 50%;

Her:

• “posisjon”Sett som“ absolutt ”som brukes til å plassere elementet i forhold til kroppsdelen av HTML.
• “forvandle”Eiendom brukes til å endre koordinatområdet til den visuelle formateringsmodellen med“oversette”Effekt.

• “venstre”Angir den horisontale innstillingen til elementet.
• “topp”Tildeler den vertikale justeringen av elementet.

Det kan observeres at det absolutte posisjonerte elementet er blitt senter justert:

Metode 2: Hvordan sentrum av bildet i forhold til “Body”?

For å sentrere bildet i forhold til kroppen, kan du prøve de gitte instruksjonene:

• Først må du lage en overskrift med "

  " stikkord.

• Deretter legger du til en "”Tag og sett inn“id”Attributt inne i bildekoden. Etter det, “src”Attributt er for å spesifisere bildebanen:

Absolutt posisjonselement

Stil “#posisjonsbilde”

#posisjon-img
Posisjon: Absolutt;
Venstre: 50%;
Transform: Translatex (-50%);

Få tilgang til ID “posisjon-img”Ved å bruke“#”Selector og påfør på samme måte“posisjon”,“venstre”, Og“forvandle" egenskaper.

Produksjon

Vi har samlet metodene for å sentrere elementet i en div med en absolutt posisjon.

Konklusjon

CSS “posisjonEiendom brukes til å sentrere et element som er absolutt plassert. Verdien er satt som "Absolutt”For å plassere elementet i forhold til foreldrenes element, som for øyeblikket er plassert i nærheten. Dessuten kan du også bruke forskjellige egenskaper sammen med posisjonseiendommen, for eksempel, "venstre”, Og“forvandle”For å sentrere elementet. Denne opplæringen demonstrerte prosedyrene for å sentrere elementet i en div med den absolutte posisjonen.