L'HTML “"È un elemento attivato dall'utente che esegue qualsiasi azione su click. È un componente chiave dei moduli basati sul web che vengono generalmente utilizzati per inviare il modulo. Inoltre, viene anche utilizzato per passare a un'altra pagina, incorporare immagini cliccabili ed eseguire altre operazioni richieste. Gli utenti possono anche applicare le proprietà CSS per modellare il pulsante, come l'allineamento dei pulsanti in tutte le direzioni, effetto molare, bordo, ecc.

Questo tutorial esaminerà:

• Come creare/creare un pulsante in un "div"?
• Come centrare un pulsante all'interno di un "div"?
• Come modellare un pulsante all'interno di un "div"?

Come creare/creare un pulsante in un "div"?

Per fare un pulsante in "div"Elemento, prova le istruzioni fornite.

Passaggio 1: crea un contenitore di div

Inizialmente, utilizza il "Tag per creare un "div"Container e assegnarlo un"id"Attributo"Main-Div".

Passaggio 2: inserire un'intestazione

Successivamente, inserisci un'intestazione con l'aiuto del "

"Tag. Incorporare il testo di intestazione tra i tag di intestazione aggiunti.

Passaggio 3: aggiungi un altro contenitore "div"

Aggiungi un altro "div"Container insieme alla classe"BTN-Center".

Passaggio 4: Crea pulsante

Per creare un pulsante, utilizzare il "Tag e specificare il "tipo"Attributo come"invia". Quindi, incorporare un po 'di testo tra ""Tag che verranno visualizzati sul pulsante:

Fare clic sul pulsante Invia

Invia

Si può notare che il pulsante è stato creato nel contenitore:

Come centrare un pulsante all'interno di un div?

Per allineare un pulsante al centro all'interno di "div"Elemento, abbiamo elencato alcuni metodi:

• Metodo 1: centra un pulsante all'interno di un "div" usando la proprietà "display"
• Metodo 2: centra un pulsante all'interno di una "div" utilizzando la proprietà "posizione"
• Metodo 3: centra un pulsante all'interno di una "div" usando la proprietà "trasforma"

Metodo 1: centra un pulsante all'interno di una proprietà "Display"

Gli utenti possono utilizzare il CSS "Schermo"Proprietà per centrare il pulsante in un"div". Per fare ciò, prova le istruzioni dichiarate.

Passaggio 1: elemento "div" stile

Per modellare il "div"Elemento, in primo luogo, accedilo con l'aiuto dell'ID assegnato"#Main-Div", Dove "#"È un selettore ID CSS. Quindi, applica le seguenti proprietà CSS:

#main-div
Bordo: 3px Solid RGB (7, 39, 223);
Margine: 20px 50px;
Background-color: Aquamarine;
imbottitura-bottom: 20px;

Qui:

• "confine"La proprietà viene utilizzata per specificare il limite attorno a un elemento.
• "margine"Assegna lo spazio al di fuori del confine definito.
• "colore di sfondo"Viene utilizzato per impostare il colore di sfondo dell'elemento.
• "imbottitura"Definisce uno spazio all'interno del pulsante dell'elemento.

Produzione

Passaggio 2: centra il pulsante nel contenitore "div"

Ora, accedi al pulsante utilizzando l'attributo della classe ".BTN-Center". Quindi, applica le proprietà sotto codifica:

.btn-center
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;

Nel frammento di codice sopra:

• "Schermo"La proprietà specifica il comportamento di visualizzazione di un elemento. Ad esempio, il valore di questa proprietà è impostato come "flettere".
• "Justify-Center"Viene utilizzato per allineare gli elementi del contenitore in modo flessibile orizzontale all'asse principale.
• "allineare"La proprietà viene utilizzata per specificare l'allineamento predefinito all'interno del contenitore della griglia o Flex per gli articoli.

Produzione

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

Per centrare un pulsante usando "posizione"Proprietà, prima, accedi al"div"Container utilizzando l'ID"#Main-Div"E applicare le proprietà CSS di seguito:

#main-div
Altezza: 150px;
Posizione: relativo;
Margine: 20px 70px;
Bordo: 3px Double RGB (3, 39, 243);
Testo-align: centro;

Qui:

• "altezza"La proprietà specifica l'altezza per l'elemento definito.
• "posizione"È utilizzato per allocare la posizione del metodo al tipo di elemento.
• "allineamento"Viene utilizzato per impostare l'allineamento del testo.

Produzione

Metodo 3: centra un pulsante all'interno di una "div" usando la proprietà "trasforma"

Posizionare un bordo in un centro all'interno di "div", Utilizza il"trasformare"Proprietà CSS. Per fare ciò, prova le istruzioni fornite.

Passaggio 1: intestazione di stile

Innanzitutto, accedi all'intestazione usando il nome del tag "H1":

H1
Testo-align: centro;

Quindi, applica il "allineamento"Proprietà per l'impostazione dell'allineamento del testo al centro.

Passaggio 2: centra un pulsante all'interno del contenitore "div"

Successivamente, accedi al secondo "div"Elemento che contiene il pulsante con l'aiuto della classe assegnata".BTN-Center"E applica le proprietà fornite:

.btn-center
Posizione: assoluto;
Top: 50%;
A sinistra: 50%;
Trasformazione: traduzione (-50%, -50%);

Qui:

• IL "posizioneLa proprietà "è impostata come"assoluto"Per posizionare l'elemento rispetto all'antenato più vicino.
• "superiore" E "Sinistra"Le proprietà sono utilizzate per l'impostazione della posizione dell'elemento dai lati superiore e sinistra.
• La proprietà "Transform" viene utilizzata per trasformare l'elemento usando "tradurre()" metodo. Questo metodo sposta un elemento dalla sua posizione attuale in base ai parametri forniti insieme a "X "e" y"Asse:

Come modellare il pulsante all'interno di un "div"?

Per modellare il pulsante all'interno di "div"Elemento, prima, accedi al pulsante con il nome del tag"pulsante"E applica le proprietà CSS dichiarate:

pulsante
Altezza: 50px;
larghezza: 80px;
raggio di confine: 50px;
Colore: RGB (58, 15, 250);
FONT: audace;
Background-color: RGB (235, 193, 9);

La descrizione delle proprietà applicate è la seguente:

• IL "altezza" E "larghezza"Proprietà imposta la dimensione dell'elemento.
• "raggio di confine"La proprietà crea gli angoli arrotondati del limite dell'elemento.
• "colore"Viene utilizzato per specificare il colore del testo dell'elemento.
• "font"Definisce lo spessore del testo.

Si può osservare che il pulsante è disegnato in base ai requisiti:

Questo è tutto su come centrare il pulsante all'interno di un contenitore.

Conclusione

Centrare un pulsante all'interno di "div", Prima, crea un""Elemento e assegnarlo un"classe" O "id"Attributo. Dopodiché, prepara un pulsante utilizzando il ""Tag. Quindi, per centrare un pulsante all'interno di "div"Elemento, prima accedere al contenitore e applicare la proprietà CSS"Schermo","trasformare", O "posizione"Per posizionare un pulsante al centro. Questo tutorial ha spiegato diversi metodi per centrare il pulsante all'interno di "div"Elemento.