CSS se uglavnom koristi za pružanje najboljeg stila HTML web stranici. Pomoću CSS-a možemo odrediti raspored elemenata na stranici.

Postoje različite metode poravnanja gumba u središtu web stranice. Gumbe možemo poravnati vodoravno kao i okomito. Gumb možemo centrirati pomoću sljedećih metoda:

poravnanje teksta: središte- Postavljanjem vrijednosti svojstva poravnanja teksta nadređene div oznake u središte.margina: auto- Postavljanjem vrijednosti svojstva margine na auto.zaslon: flex- Postavljanjem vrijednosti svojstva prikaza na flex i vrijednosti opravdati-sadržaj vlasništvo na centar .prikaz: rešetka- Postavljanjem vrijednosti svojstva prikaza na mrežu.

Razumimo gore navedene metode pomoću nekih ilustracija.

Primjer

U ovom primjeru koristimo poravnanje teksta svojstvo i postavite njegovu vrijednost na centar . Može se postaviti u oznaku tijela ili u nadređenu oznaku div elementa.

Ovdje postavljamo poravnanje teksta: središte; u nadređenoj oznaci div elementa gumba.

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

Izlaz

Primjer

U ovom primjeru koristimo prikaz: rešetka; vlasništvo, i margina: auto; vlasništvo. Ovdje postavljamo prikaz: rešetka; u nadređenoj oznaci div elementa gumba.

string jsonobject

Gumb će se postaviti u središte vodoravnog i okomitog položaja.

 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> 

Izlaz

Primjer

To je još jedan primjer postavljanja gumba u središte. U ovom primjeru koristimo zaslon: savitljiv; vlasništvo, justify-content: centar; vlasništvo, i align-items: center; vlasništvo.

Ovaj primjer će nam pomoći da postavimo gumb u središte vodoravne i okomite pozicije.

 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 

Izlaz