CSS används främst för att ge HTML-webbsidan den bästa stilen. Med hjälp av CSS kan vi specificera arrangemanget av element på sidan.

Det finns olika metoder för att justera knappen i mitten av webbsidan. Vi kan rikta in knapparna horisontellt såväl som vertikalt. Vi kan centrera knappen genom att använda följande metoder:

text-align: center- Genom att sätta värdet på text-align-egenskapen för den överordnade div-taggen i mitten.marginal: auto- Genom att ställa in värdet på marginalegenskapen till auto.display: flex- Genom att ställa in värdet på display-egenskapen till flex och värdet på motivera-innehåll egendom till Centrum .display: rutnät- Genom att ställa in värdet på visningsegenskapen till rutnätet.

Låt oss förstå metoderna ovan genom att använda några illustrationer.

Exempel

I det här exemplet använder vi textjustera egendom och ställ in dess värde till Centrum . Den kan antingen placeras i en body-tagg eller i elementets överordnade div-tagg.

Här placerar vi text-align: center; i den överordnade div-taggen för knappelementet.

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

Produktion

Exempel

I det här exemplet använder vi display: rutnät; egendom och marginal: bil; fast egendom. Här placerar vi display: rutnät; i den överordnade div-taggen för knappelementet.

algoritm djup första sökning

Knappen kommer att placeras i mitten av de horisontella och vertikala positionerna.

 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> 

Produktion

Exempel

Det är ytterligare ett exempel på att placera knappen i mitten. I det här exemplet använder vi display: flex; fast egendom, motivera-innehåll: center; egendom och align-items: center; fast egendom.

Det här exemplet hjälper oss att placera knappen i mitten av de horisontella och vertikala positionerna.

 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 

Produktion