Come centrarti un pulsante usando CSS Flexbox

In HTML, i pulsanti sono elementi cliccabili utilizzati per eseguire un'azione specifica. Usando CSS, è possibile impostare la posizione del pulsante dove si desidera posizionarlo. Per fare ciò, ci sono diverse tecniche in CSS, una di queste è Flexbox. "flettere"Viene utilizzato per impostare la posizione dell'elemento secondo il suo punto di vista.

Questo articolo insegnerà come centrare un pulsante usando CSS Flexbox.

Quindi, iniziamo!

Pulsante come centrare utilizzando CSS Flexbox?

"flettere"È il valore impostato per la proprietà di visualizzazione di CSS. A seconda della dimensione della vista, imposta contenuto o elementi di conseguenza. In CSS, il valore flessibile crea uguale spazio tra elementi per assicurarsi che siano disposti in modo efficiente.

Sintassi

Nella sintassi sopra offerta, "flettere"Sarà specificato come valore del"Schermo" proprietà.

Quindi, controlliamo l'esempio per centralizzare il pulsante usando Flex.

Esempio

Nell'HTML, creeremo un contenitore con classe denominata "pulsante"E al suo interno crea un pulsante usando il tag:

Nel file CSS, ".pulsante"Viene utilizzato per accedere alla classe che abbiamo assegnato a . Per impostare la posizione del pulsante aggiunto al centro del Div, assegneremo il valore della proprietà di visualizzazione, giustificare il contenuto e allineare come "flettere","centro", E "centro"Rispettivamente. Inoltre, imposteremo l'altezza del div creato su "200px"E assegnare il valore del bordo come"5px","solido" E "nero":

Nel codice sopra dato, "giustificare il contenuto"Viene utilizzato per impostare il pulsante al centro del Div in orizzontale e"allineare"Viene utilizzato per impostare il pulsante al centro del Div verticalmente.

Dopo aver implementato il codice sopra, vai al file HTML ed eseguilo per vedere il seguente risultato:

Puoi vedere quel pulsante viene visualizzato correttamente al centro del div.

Conclusione

Per centrare il pulsante, puoi usare il "Schermo","allineare", E "giustificare il contenuto"Proprietà di CSS. Queste proprietà consentono di impostare il pulsante al centro del div o qualsiasi elemento quando si specifica il valore della proprietà di visualizzazione come "flettere", Allineare e giustificare il contenuto come"centro". In questo articolo, abbiamo spiegato come centrare il pulsante usando Flexbox con l'aiuto di un esempio appropriato.