Hvordan du sentrerer en knapp ved hjelp av CSS Flexbox

I HTML er knapper klikkbare elementer som brukes til å utføre en spesifikk handling. Ved hjelp av CSS kan du stille inn knappens plassering der du vil plassere den. For å gjøre det er det flere teknikker i CSS, en av dem er Flexbox. “Flex”Brukes til å sette elementets plassering i henhold til dets visningsport.

Denne artikkelen vil lære hvordan du sentrerer en knapp ved hjelp av CSS Flexbox.

Så la oss begynne!

Hvordan midtknapp ved hjelp av CSS Flexbox?

“Flex”Er verdien som er satt for visningsegenskapen til CSS. Avhengig av Viewport -størrelsen, setter den innhold eller elementer deretter. I CSS skaper flexverdien like mellomrom mellom elementer for å sikre at de er ordnet effektivt.

Syntaks

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

Så la oss sjekke eksemplet for å sentralisere knappen ved hjelp av flex.

Eksempel

I HTML vil vi lage en beholder med klasse som heter “knapp”Og inni den opprett en knapp ved hjelp av tag:

I CSS -filen, ".knapp”Brukes til å få tilgang til klassen vi har tildelt . For å angi plasseringen av den ekstra knappen i midten av DIV, vil vi tilordne verdien av displayegenskapen, rettferdiggjøring og innløp og justering som "Flex”,“senter”, Og“senter”, Henholdsvis. Videre vil vi sette høyden på den opprettede div til “200px”Og tilordne verdien av grensen som“5px”,“fast”Og“svart”:

I den ovennevnte koden, "Justify-Content”Brukes til å sette knappen i midten av divet horisontalt og“Align-varen”Brukes til å sette knappen i midten av div vertikalt.

Etter å ha implementert koden ovenfor, gå til HTML -filen og utfør den for å se følgende utfall:

Du kan se at knappen vises med hell i midten av DIV.

Konklusjon

For å sentrere knappen, kan du bruke “vise”,“Align-varen”, Og“Justify-Content”Egenskaper til CSS. Disse egenskapene lar deg stille inn knappen i midten av DIV eller et hvilket som helst element når du spesifiserer verdien på displayegenskapen som "Flex”, Align-element, og rettferdiggjør innhold som“senter”. I denne artikkelen har vi forklart hvordan du sentrerer knappen ved hjelp av Flexbox ved hjelp av et passende eksempel.