CSS bruges hovedsageligt til at give HTML-websiden den bedste stil. Ved hjælp af CSS kan vi specificere arrangementet af elementer på siden.
Der er forskellige metoder til at justere knappen i midten af websiden. Vi kan justere knapperne vandret såvel som lodret. Vi kan centrere knappen ved at bruge følgende metoder:
Lad os forstå ovenstående metoder ved at bruge nogle illustrationer.
Eksempel
I dette eksempel bruger vi tekstjustering ejendom og sæt dens værdi til centrum . Det kan enten placeres i et body-tag eller i elementets overordnede div-tag.
Her placerer vi tekst-align: center; i knapelementets overordnede div-tag.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me Test det nu Produktion
Eksempel
I dette eksempel bruger vi display: gitter; ejendom, og margin: auto; ejendom. Her placerer vi display: gitter; i knapelementets overordnede div-tag.
indkapslingsprogram
Knappen placeres i midten af den vandrette og lodrette position.
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> Test det nu Produktion
Eksempel
Det er endnu et eksempel på at placere knappen i midten. I dette eksempel bruger vi display: flex; ejendom, retfærdiggøre-indhold: center; ejendom, og align-items: center; ejendom.
Dette eksempel hjælper os med at placere knappen i midten af den vandrette og lodrette position.
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 Test det nu Produktion
