I CSS vengono utilizzati principalmente per fornire lo stile migliore alla pagina Web HTML. Usando i CSS, possiamo specificare la disposizione degli elementi sulla pagina.

Esistono vari metodi per allineare il pulsante al centro della pagina web. Possiamo allineare i pulsanti sia orizzontalmente che verticalmente. Possiamo centrare il pulsante utilizzando i seguenti metodi:

allineamento testo: centro- Impostando al centro il valore della proprietà di allineamento del testo del tag div principale.margine: automatico- Impostando il valore della proprietà margin su auto.visualizzazione: flessibile- Impostando il valore della proprietà di visualizzazione su flex e il valore di giustificare il contenuto proprietà a centro .visualizzazione: griglia- Impostando il valore della proprietà di visualizzazione sulla griglia.

Comprendiamo i metodi di cui sopra utilizzando alcune illustrazioni.

Esempio

In questo esempio, stiamo utilizzando il file allineamento del testo proprietà e impostarne il valore su centro . Può essere inserito in un tag body o nel tag div genitore dell'elemento.

Qui posizioniamo il allineamento testo: centro; nel tag div genitore dell'elemento button.

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

Produzione

Esempio

In questo esempio, stiamo utilizzando il file visualizzazione: griglia; proprietà, e margine: automatico; proprietà. Qui posizioniamo il visualizzazione: griglia; nel tag div genitore dell'elemento button.

grafico di allocazione delle risorse

Il pulsante verrà posizionato al centro delle posizioni orizzontale e verticale.

 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> 

Produzione

Esempio

È un altro esempio di posizionamento del pulsante al centro. In questo esempio, stiamo utilizzando il file display: flessibile; proprietà, giustifica-contenuto: centro; proprietà, e allineare gli elementi: centro; proprietà.

Questo esempio ci aiuterà a posizionare il pulsante al centro delle posizioni orizzontale e verticale.

 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 

Produzione