Come centrarti un pulsante all'interno di un div usando CSS

I pulsanti sono una necessità per le applicazioni Web. Sono utili nel innescare le diverse funzionalità o nell'esecuzione di azioni importanti. Tuttavia, se i pulsanti sono posizionati in cui nessuno può vederli o si infastidisce per fare clic su di loro, sono completamente inutili. Per evitare tali cose, possiamo mettere i nostri pulsanti al centro per renderli più visibili per gli utenti.

Questo articolo dimostrerà come centrare l'elemento pulsante all'interno di un div usando CSS.

Come centrarti un pulsante all'interno di un div usando CSS?

In CSS, utilizzeremo le seguenti proprietà per centrare il pulsante all'interno di un div:

• Visualizza proprietà
• Proprietà di posizione

Quindi, elaboriamo ognuno per uno!

Metodo 1: centra un pulsante all'interno di div usando la proprietà di visualizzazione CSS

Per controllare come si comporterà un elemento HTML selezionato, il "Schermo"La proprietà viene utilizzata. Questa proprietà è utile per rendere gli elementi flessibili per impostarli in un luogo specifico, come l'impostazione dell'elemento al centro, visualizzando proprietà con contento giustifica.

Facciamo un esempio per riconoscere il funzionamento della proprietà display per centrare il pulsante all'interno dell'elemento Div.

Esempio

Qui, abbiamo un pulsante all'interno del contenitore sulla nostra pagina web. Quindi, posizioniamolo al centro:

Nel nostro file HTML, abbiamo specificato un pulsante utilizzando il ""Tag e lo ha dichiarato all'interno del"". Ora specifica il div all'interno dei tag.

Html

Il mio pulsante

Nel file CSS, utilizzeremo il "confine"Proprietà con il valore"solido 1.5px", Dove solido è il tipo e 1.5px è la larghezza del confine. Ora, assegna un'altezza appropriata a div usando il "altezza"Proprietà come"7rem". IL "SchermoLa proprietà "verrà utilizzata con il valore"flettere"Per rendere flessibile la porzione definita.

Nel passaggio successivo, allineeremo il pulsante al centro in orizzontale e verticalmente usando il valore "centro" per il "giustificare il contenuto" E "allineare" proprietà.

CSS

div
Bordo: solido 1.5px;
Altezza: 7rem;
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;

Salva il codice ed esegui il file HTML nel browser:

Come puoi vedere, abbiamo centrato con successo un pulsante all'interno di un div usando le proprietà CSS.

Metodo 2: centra un pulsante all'interno di div usando la proprietà di posizione CSS

IL "posizione"La proprietà viene utilizzata per posizionare gli elementi HTML in una posizione specifica. La combinazione di questa proprietà con altre proprietà CSS aiuta a raggiungere i risultati desiderati con grazia.

Esempio

Nell'elemento Div, prenderemo il valore di "allineamento"Proprietà come"centro"Per posizionare il pulsante in orizzontale al centro. Per l'elemento del pulsante, specificare "posizione"Proprietà con il valore"parente"; Questo renderà l'elemento pulsante per posizionare il relativo dalla sua posizione standard. Successivamente, imposteremo il "superiore"Valore della proprietà a"40%"Per allineare il pulsante al centro verticalmente.

CSS

div
Bordo: solido 1.5px;
Altezza: 7rem;
Testo-align: centro;

Button
Posizione: relativo;
Top: 40%;

Produzione

Abbiamo spiegato i metodi più semplici per centrare un pulsante all'interno di un div usando CSS.

Conclusione

Per centralare un pulsante all'interno di un div, il "Schermo" O "posizione"La proprietà verrà utilizzata. La proprietà del display verrà utilizzata con la combinazione di altre proprietà, come gli elementi di allineamento e giustificare il contenuto, per centrare l'elemento pulsante. Inoltre, la proprietà di posizione viene utilizzata con la proprietà allinea e top per ottenere il risultato desiderato. In questo articolo, abbiamo spiegato come centrare un elemento pulsante all'interno di un div usando CSS.