CSS brukes hovedsakelig for å gi den beste stilen til HTML-nettsiden. Ved å bruke CSS kan vi spesifisere arrangementet av elementer på siden.

Det finnes ulike metoder for å justere knappen i midten av nettsiden. Vi kan justere knappene horisontalt så vel som vertikalt. Vi kan sentrere knappen ved å bruke følgende metoder:

tekstjustering: senter- Ved å sette verdien av tekstjusteringsegenskapen til overordnet div-tag i midten.margin: auto- Ved å sette verdien av margin eiendom til auto.display: flex- Ved å sette verdien av display-egenskapen til flex og verdien av rettferdiggjøre-innhold eiendom til senter .display: rutenett- Ved å sette verdien av visningsegenskapen til rutenettet.

La oss forstå metodene ovenfor ved å bruke noen illustrasjoner.

Eksempel

I dette eksemplet bruker vi tekstjustering eiendom og sett verdien til senter . Den kan enten plasseres i en body-tag eller i den overordnede div-taggen til elementet.

Her plasserer vi tekst-align: center; i den overordnede div-taggen til knappeelementet.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

Produksjon

Eksempel

I dette eksemplet bruker vi display: rutenett; eiendom, og margin: bil; eiendom. Her plasserer vi display: rutenett; i den overordnede div-taggen til knappeelementet.

linux redigere en fil

Knappen vil plasseres i midten av den horisontale og vertikale posisjonen.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

Produksjon

Eksempel

Det er et annet eksempel på å plassere knappen i midten. I dette eksemplet bruker vi display: flex; eiendom, rettferdiggjøre-innhold: senter; eiendom, og align-items: center; eiendom.

Dette eksemplet vil hjelpe oss å plassere knappen i midten av den horisontale og vertikale posisjonen.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

Produksjon