A CSS-t elsősorban a HTML weboldal legjobb stílusának biztosítására használják. A CSS használatával megadhatjuk az elemek elrendezését az oldalon.
A weboldal közepén található gombok igazítására többféle módszer létezik. A gombokat vízszintesen és függőlegesen is igazíthatjuk. Középre állíthatjuk a gombot a következő módszerekkel:
Nézzük meg a fenti módszereket néhány illusztráció segítségével.
Példa
Ebben a példában a szöveg igazítás tulajdonságot, és állítsa be értékét a központ . Elhelyezhető egy body címkében vagy az elem szülő div címkéjében.
Itt helyezzük el a szöveg igazítása: középre; a gombelem szülő div címkéjében.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me Tesztelje most Kimenet
Példa
Ebben a példában a kijelző: rács; ingatlan, és margó: auto; ingatlan. Itt helyezzük el a kijelző: rács; a gombelem szülő div címkéjében.
külön számítanak
A gomb a vízszintes és függőleges pozíciók közepére kerül.
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> Tesztelje most Kimenet
Példa
Ez egy másik példa a gomb középre helyezésére. Ebben a példában a kijelző: flex; ingatlan, indokol-tartalom: center; ingatlan, és align-ites: center; ingatlan.
Ez a példa segít abban, hogy a gombot a vízszintes és függőleges pozíciók közepére helyezzük.
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 Tesztelje most Kimenet
