CSS se uporablja predvsem za zagotavljanje najboljšega sloga spletni strani HTML. Z uporabo CSS lahko določimo razporeditev elementov na strani.

Obstaja več načinov za poravnavo gumba na sredini spletne strani. Gumbe lahko poravnamo vodoravno in navpično. Gumb lahko centriramo na naslednje načine:

poravnava besedila: sredina- Z nastavitvijo vrednosti lastnosti poravnave besedila nadrejene oznake div na sredino.rob: avto- Z nastavitvijo vrednosti lastnosti marže na samodejno.zaslon: flex- Z nastavitvijo vrednosti lastnosti prikaza na flex in vrednosti justify-content premoženje do center .prikaz: mreža- Z nastavitvijo vrednosti lastnosti prikaza na mrežo.

Razumejmo zgornje metode z uporabo nekaj ilustracij.

Primer

V tem primeru uporabljamo poravnava besedila in nastavite njeno vrednost na center . Lahko se postavi v oznako body ali v nadrejeno oznako div elementa.

Tukaj postavljamo poravnava besedila: sredina; v nadrejeni oznaki 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 

Izhod

Primer

V tem primeru uporabljamo prikaz: mreža; premoženje, in rob: avto; premoženje. Tukaj postavljamo prikaz: mreža; v nadrejeni oznaki div elementa gumba.

unix ustvari imenik

Gumb bo postavljen na sredino vodoravnega in navpičnega 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> 

Izhod

Primer

To je še en primer postavitve gumba na sredino. V tem primeru uporabljamo zaslon: flex; lastnina, justify-content: center; premoženje, in align-items: center; premoženje.

Ta primer nam bo pomagal postaviti gumb na sredino vodoravnega in navpičnega položaja.

 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 

Izhod