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:
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 Preizkusite zdaj 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> Preizkusite zdaj 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 Preizkusite zdaj Izhod
