CSS:ää käytetään pääasiassa parhaan tyylin tarjoamiseen HTML-verkkosivulle. CSS:n avulla voimme määrittää elementtien järjestyksen sivulla.
On olemassa useita tapoja kohdistaa painike verkkosivun keskellä. Voimme kohdistaa painikkeet sekä vaaka- että pystysuoraan. Voimme keskittää painikkeen seuraavilla tavoilla:
Ymmärrämme yllä olevia menetelmiä käyttämällä joitain kuvia.
Esimerkki
Tässä esimerkissä käytämme tekstin tasaus omaisuutta ja aseta sen arvoksi keskusta . Se voidaan sijoittaa joko body-tunnisteeseen tai elementin div-ylätunnisteeseen.
Tässä laitamme tekstin tasaus: keskellä; painikeelementin ylätason div-tunnisteessa.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me Testaa nyt Lähtö
Esimerkki
Tässä esimerkissä käytämme näyttö: ruudukko; omaisuutta ja margin: auto; omaisuutta. Tässä laitamme näyttö: ruudukko; painikeelementin ylätason div-tunnisteessa.
Android prosessi acore
Painike sijoittuu vaaka- ja pystyasennon keskelle.
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> Testaa nyt Lähtö
Esimerkki
Se on toinen esimerkki painikkeen sijoittamisesta keskelle. Tässä esimerkissä käytämme näyttö: flex; omaisuutta, perustele-sisältö: keskus; omaisuutta ja kohdista kohteet: keskellä; omaisuutta.
Tämä esimerkki auttaa meitä sijoittamaan painikkeen vaaka- ja pystyasennon keskelle.
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 Testaa nyt Lähtö
