TechCodeview

CSS wordt voornamelijk gebruikt om de HTML-webpagina de beste stijl te geven. Met behulp van CSS kunnen we de rangschikking van elementen op de pagina specificeren.

Er zijn verschillende methoden om de knop in het midden van de webpagina uit te lijnen. We kunnen de knoppen zowel horizontaal als verticaal uitlijnen. We kunnen de knop centreren met behulp van de volgende methoden:

tekst uitlijnen: centreren- Door de waarde van de eigenschap Text-align van de bovenliggende div-tag in het midden in te stellen.marge: automatisch- Door de waarde van de marge-eigenschap in te stellen op automatisch.weergave: flex- Door de waarde van de weergave-eigenschap in te stellen op flex en de waarde van rechtvaardigen-inhoud eigendom aan centrum .weergave: raster- Door de waarde van de weergave-eigenschap in te stellen op het raster.

Laten we de bovenstaande methoden begrijpen aan de hand van enkele illustraties.

Voorbeeld

In dit voorbeeld gebruiken we de tekst uitlijnen eigendom en stel de waarde ervan in op de centrum . Het kan in een body-tag of in de bovenliggende div-tag van het element worden geplaatst.

Hier plaatsen wij de tekst uitlijnen: centreren; in de bovenliggende div-tag van het knopelement.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

Uitvoer

Voorbeeld

In dit voorbeeld gebruiken we de weergave: raster; eigendom, en marge: auto; eigendom. Hier plaatsen wij de weergave: raster; in de bovenliggende div-tag van het knopelement.

Wie is Freddie Mercury?

De knop wordt in het midden van de horizontale en verticale posities geplaatst.

 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> 

Uitvoer

Voorbeeld

Dit is een ander voorbeeld van het plaatsen van de knop in het midden. In dit voorbeeld gebruiken we de weergave: flex; eigendom, rechtvaardigen-inhoud: centrum; eigendom, en items uitlijnen: centreren; eigendom.

Dit voorbeeld helpt ons om de knop in het midden van de horizontale en verticale posities te plaatsen.

 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 

Uitvoer