Hvordan du sentrerer en knapp i en div ved hjelp av CSS

Knapper er en nødvendighet for webapplikasjoner. De er gunstige i å utløse de forskjellige funksjonalitetene eller utføre viktige handlinger. Imidlertid, hvis knapper er plassert der ingen kan se dem eller plager for å klikke på dem, er de helt ubrukelige. For å unngå slike ting, kan vi plassere knappene våre i sentrum for å gjøre dem mer synlige for brukerne.

Denne oppskrivningen vil demonstrere hvordan du sentrerer knappelementet i en div ved hjelp av CSS.

Hvordan du sentrerer en knapp i en div ved hjelp av CSS?

I CSS bruker vi følgende egenskaper for å sentrere knappen inne i en div:

• Vis eiendom
• Stillingseiendom

Så la oss utdype hver enkelt etter en!

Metode 1: Senter en knapp innen DIV ved hjelp av CSS Display -egenskap

For å kontrollere hvordan et valgt HTML -element vil oppføre seg, "vise”Eiendom brukes. Denne egenskapen er nyttig med å gjøre elementer fleksible for å sette dem på et bestemt sted, for eksempel å sette elementet i sentrum, vise eiendom med rettferdig innhold og justere elementer kan brukes.

La oss ta et eksempel for å anerkjenne arbeidet med visningseiendom for å sentrere knappen innenfor DIV -elementet.

Eksempel

Her har vi en knapp inne i beholderen på websiden vår. Så la oss plassere det i sentrum:

I vår HTML -fil har vi spesifisert en knapp ved hjelp av "”Tag og erklærte det inne i““. Spesifiser nå div innen tagger.

Html

Knappen min

I CSS -filen bruker vi “grense”Eiendom med verdien”solid 1.5px”, Der faststoff er typen, og 1.5px er bredden på grensen. Nå, tilordne en passende høyde til Div ved å bruke "høyde”Eiendom som“7REM”. “vise”Eiendom vil bli brukt med verdien”Flex”For å gjøre den definerte delen fleksibel.

I neste trinn justerer vi knappen for å sentrere horisontalt og vertikalt ved hjelp av verdien "senter" for "Justify-Content”Og“Align-elementer" egenskaper.

CSS

div
Grense: Solid 1.5px;
Høyde: 7REM;
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;

Lagre koden og kjør HTML -filen i nettleseren din:

Som du ser, har vi sentrert en knapp inne i en div ved hjelp av CSS -egenskaper.

Metode 2: Senter en knapp innen DIV ved hjelp av CSS -posisjonsegenskaper

“posisjon”Eiendom brukes til å plassere HTML -elementer i en bestemt stilling. Kombinasjonen av denne egenskapen med andre CSS -egenskaper hjelper til med å oppnå de ønskede resultatene grasiøst.

Eksempel

I DIV -elementet vil vi ta verdien av "Tekstalign”Eiendom som“senter”For å plassere knappen horisontalt i midten. For knappelementet, spesifiser "posisjon”Eiendom med verdien”slektning”; Dette vil gjøre knappelementet til å plassere relativt fra sin standardposisjon. Deretter vil vi sette "topp”Eiendomsverdi til“40%”For å justere knappen i midten vertikalt.

CSS

div
Grense: Solid 1.5px;
Høyde: 7REM;
tekst-align: sentrum;

knapp
Posisjon: relativ;
Topp: 40%;

Produksjon

Vi har forklart de enkleste metodene for å sentrere en knapp inne i en div ved hjelp av CSS.

Konklusjon

For å sentrere en knapp inne i en div, "vise”Eller“posisjon”Eiendom vil bli brukt. Displayegenskapen vil bli brukt med kombinasjonen av andre egenskaper, for eksempel justering av justeringer og rettferdiggjøring, for å sentrere knappelementet. Dessuten brukes posisjonsegenskapen med tekstjusterings- og toppegenskap for å få ønsket resultat. I denne oppskrivningen har vi forklart hvordan du sentrerer et knappelement i en div ved hjelp av CSS.