Hvordan justere knappen nederst på DIV ved hjelp av CSS?

For å skape et klart og symmetrisk utseende av elementer, brukes justeringer på websider eller nettsteder. CSS lar deg justere HTML -elementer i forskjellige posisjoner, for eksempel sentrum, venstre, høyre og bunn. I denne håndboken brukte vi to metoder for å justere knappen nederst i Div som er:

• • Metode 1: Juster knappen nederst på DIV ved å bruke “vise”Eiendom
  • Metode 2: Juster knappen nederst i DIV ved å bruke “posisjon”Eiendom

Så la oss komme i gang!

Metode 1: Juster -knappen nederst på DIV ved hjelp av "Display" -egenskaper

I CSS, for å justere knappen nederst på DIV, verdien av "vise”Eiendom er satt som“Flex”. Det avhenger av visningsstørrelsen og setter innhold eller elementer deretter. Flexverdien skaper også like mellomrom mellom elementer for å sikre at de er ordnet symmetrisk.

Syntaks

Display: Flex

I ovennevnte syntaks, “Flex”Vil bli spesifisert som verdien av“vise”Eiendom.

Så la oss sjekke eksemplet for å justere knappen nederst ved å bruke flex.

Eksempel 1: Juster knappen nederst og sentrum av DIV

I HTML vil vi legge til en hoveddiv og tildele klassenavnet som "div”Og legg til overskriften og en sub div. Vi vil tildele klassenavnet som "btn”For å sub div og legge til en knapp i den ved hjelp av taggen.

Html

Juster knappen nederst

Knapp

Etter fullføringen av HTML -koden, flytt til CSS.

Her vil vi bruke “.div”For å få tilgang til hovedbeholderen vi har laget i HTML. Deretter vil vi sette høyden på divet som “150px”Og angi posisjonsverdien som“slektning”. For å style div, sett grensen til div som “2px”,“fast”, Og“RGB (26, 53, 1)”Og bakgrunnsfargen på diven som“RGB (162, 173, 121)”.

CSS

.div
Høyde: 150px;
Posisjon: relativ;
Grense: 2px fast RGB (26, 53, 1);
bakgrunnsfarge: RGB (162, 173, 121);

Merk: Det er nødvendig å stille inn posisjonen og høyden på div for å stille inn knappen nederst på div.

Bruk deretter “.btn”For å få tilgang til underdiven som ble opprettet i HTML -delen. Angi verdien av displayegenskapen som "Flex”Og høyde som“130px”. Etter det, sett verdien av rettferdig innhold og justering som "senter”For å stille inn knappen nederst i div:

.btn
Display: Flex;
Høyde: 130px;
Justify-Content: Center;
Align-elementer: sentrum;

Utgangen fra ovennevnte kode er gitt nedenfor. Her kan du se den knappen som er i samsvar med bunnen av div:

Eksempel 2: Juster knappen nederst til venstre for DIV

For å justere knappen på venstre nederste side av DIV, trenger du bare å endre verdien av eiendommen til rettferdig innhold fra sentrum til "venstre”:

Justify-Content: Venstre;

Produksjon

Eksempel 3: Juster knappen nederst til høyre for DIV

For å justere knappen på høyre nederste side av DIV, må du erstatte verdien av egenskapen Justify-Content fra sentrum til "Ikke sant”:

Justify-Content: Right;

Produksjon

Gå nå til neste metode for å justere knappen nederst på Div.

Metode 2: Juster knappen nederst på DIV ved hjelp av "posisjon" -egenskaper

“posisjon”Eiendom brukes til å spesifisere en annen type posisjon som brukes til forskjellige HTML -elementer. Syntaksen til posisjonsegenskapen er gitt nedenfor.

Syntaks

Posisjon: Statisk | Absolutt | Fast | Relativ

I ovennevnte syntaks er følgende fire egenskaper av posisjonsegenskapen nevnt:

• • statisk: Det brukes til å stille posisjonen i henhold til normal sidestrømning. Denne posisjonsmetoden er satt som standard.
  • slektning: Det brukes til å stille inn et element i forhold til det andre elementet i forhold til det andre elementet.
  • Absolutt: Det brukes til å justere posisjonen til et underelement basert på plasseringen av hovedelementet.
  • fikset: Den spesifiserer elementets plassering i henhold til dets visningsport.

La oss fortsette eksemplet for å justere knappen nederst på Div.

Eksempel 1: Juster knappen nederst til høyre for DIV

Vi vil fortsette det forrige eksemplet HTML -kode og tildele egenskaper til Div deretter:

.div
Posisjon: relativ;
grense: 2px fast RGB (12, 38, 46);
bakgrunnsfarge: RGB (55, 104, 119);
Høyde: 150px;

Etter det vil vi sette posisjonsegenskapen til å angi posisjonen til knappen “.btn”Klasse som får tilgang til knappen vi opprettet i HTML. Sett deretter verdien av posisjonsegenskapen som "Absolutt”Og sett bunn- og høyre margin som“5px”Og“0px”:

.btn
Posisjon: Absolutt;
Bunn: 5px;
Til høyre: 0px;

Merk: For hoveddiven har vi satt verdien av posisjonsegenskaper som “slektning”Og sub div som“Absolutt”. For å gjøre dette gir hoveddiven kontrollen for å justere posisjonen til underdiven. Hvis du har satt verdien av posisjonsegenskaper for både foreldre og barn Div som relativ, plasserer den ikke en knapp nederst på DIV.

Som du kan se i følgende utdata, er knappen satt nederst til høyre i Div:

Eksempel 2: Juster knappen nederst til venstre for DIV

For å stille inn knappen nederst til venstre på Div, vil vi erstatte “Ikke sant”Eiendom med“venstre”Og sett verdien som følger:

Venstre: 0px;

Produksjon

Det er det! Vi har forklart metoden for å justere knappen nederst på DIV ved hjelp av CSS.

Merk: Vi kan også stille inn knappen i midten ved å gi verdiene til "venstre”Eiendom manuelt, men vi anbefaler det ikke fordi det kan påvirke responsen på siden.

Konklusjon

“vise”Og“posisjon”Eiendom til CSS brukes til å justere knappen nederst på DIV. Bruke posisjonsegenskapen, sett verdien av posisjonen til overordnet element som “slektning”Og barneelement som“Absolutt”, Og for visningseiendommen, sett den til verdi som“Flex”. I denne artikkelen har vi forklart metoden for å justere knappen nederst i Div og gitt forskjellige eksempler på den.