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:
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 Testirajte sada 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> Testirajte sada 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 Testirajte sada Izlaz
