In HTML, i campi di input vengono utilizzati per creare moduli. Ciò consente di ottenere l'input dall'utente, come nome, indirizzo e numero di telefono. In CSS, puoi modellare i campi di input in vari modi, come cambiare il colore del campo di input, ridimensionamento, aggiunta di bordi e centratura. Più specificamente, ci sono metodi diversi per allineare il campo di input, tra cui sinistra, destra, centro, superiore e inferiore.

In questo articolo, impareremo come centrare il campo di input usando tre diversi metodi in CSS, che sono:

• Centra un campo di input usando "allineamento"
• Centra un campo di input usando "margine"
• Centra un campo di input usando "griglia"

Al fine di allineare il campo di input al centro dell'elemento HTML; Innanzitutto, devi imparare il metodo per creare il campo di input e poi modellarlo.

Cominciamo!

Come creare il campo di input in Div usando HTML?

In HTML, creeremo un div e assegneremo la classe "div"Ad esso e aggiungi una voce

All'interno del tag. Successivamente, crea un sub div e assegna il nome della classe come "ingresso"E un campo di input in esso usando il tag; Imposta il tipo di campo di input come "testo", E nel segnaposto, aggiungi il testo come"accedere il tuo nome". L'aggiunta scomparirà quando un utente digita qualsiasi cosa nel campo di input

Html

Campo di input centrale utilizzando il testo allineato

Nell'output di seguito, puoi vedere che il campo di input viene creato correttamente nel Div:

Dopodiché, passa a CSS per lo styling degli elementi HTML.

Come modellare il div usando CSS?

Nel file CSS, usa ".div"Per accedere al Div creato in HTML. Quindi, imposta l'altezza del div come "250px", Aggiungi un colore di sfondo come"RGB (134, 240, 227)"E imposta la larghezza del confine come"10px", Stile come"cresta”, E colore come"RGB (2, 141, 127)".

CSS

.div
Altezza: 250px;
Background: RGB (134, 240, 227);
Bordo: 10px Ridge RGB (2, 141, 127);

Produzione

Ora controlleremo diversi metodi per allineare un campo di input usando CSS.

Metodo 1: come centrare un campo di input usando "allineamento del testo"?

Per centrare il campo di input, utilizzeremo il "allineamento"Proprietà di CSS. Viene utilizzato per impostare l'allineamento orizzontale del testo negli elementi HTML come sinistra, destra, al centro e giustifica.

Sintassi

La sintassi della proprietà allineata al testo è:

Testo-align: sinistra | destra | Centro | Justify

La descrizione della sintassi sopra fornita è riportata di seguito:

• Sinistra: È il valore predefinito della proprietà allineata al testo utilizzata per impostare il testo sul lato sinistro dell'elemento HTML.
• Giusto: È usato per allineare il testo sul lato destro.
• centro: Specifica l'allineamento centrale del testo.
• giustificare: Usandolo, le parole sono sparse in una linea completa.

Continuiamo l'esempio e allineiamo il campo di input al centro del div.

Esempio

Qui useremo il ".ingresso"Per accedere al sub div in cui viene creato il campo di input. Successivamente, imposteremo il valore della proprietà allineale come "centro"Per centrare il campo di input:

.ingresso
Testo-align: centro;

La seguente immagine mostra che il campo di input è allineato al centro del div:

Metodo 2: come centrare un campo di input usando "margine"?

Per creare un'area trasparente attorno a un elemento, il "margine"La proprietà del CSS viene utilizzata. Questa proprietà consente di impostare il margine di un elemento dai lati sinistro, destro, superiore e inferiore. È anche una proprietà abbreviata di proprietà a margine, margine-top, margine-destra e margine-a sinistra. In una riga, puoi impostare tutti e quattro i valori.

Sintassi

La sintassi della proprietà del margine è riportata di seguito:

Margine: lunghezza | auto

IL "lunghezza" E "auto"Sono i valori della proprietà del margine utilizzato per:

• lunghezza: È usato per impostare manualmente il margine.
• auto: Consente al browser di impostare il margine attorno a un elemento da solo.

Continuiamo l'esempio e centra il campo di input.

Esempio

Considera l'esempio precedente e cambia lo stile del bordo usando la proprietà del bordo. Dopodiché, all'interno del "ingresso"Classe, utilizzare la proprietà margin per centrare allineare il campo di input. Imposta il valore del margine come "auto"E mostralo come"bloccare"Per centrare il campo di input. Qui, abbiamo usato il valore della proprietà del display come blocco perché consente a un elemento di visualizzare in un blocco e occupa la larghezza dell'intera linea:

ingresso
Margine: auto;
blocco di visualizzazione;

Utilizzando il codice sopra, si ottiene il seguente output:

Dopo la riuscita implementazione del secondo metodo, passeremo al terzo metodo.

Metodo 3: come centrare un campo di input usando "griglia"?

Per centrare il campo di input, useremo la proprietà di visualizzazione e imposteremo i suoi valori come "griglia". Consente a un elemento di visualizzare in un contenitore a griglia.

Sintassi

La sintassi della proprietà del display è:

display: griglia;

Come continuazione dell'esempio precedente, allineiamo il campo di input.

Esempio

Usa il ".ingresso"Per accedere al sub div in cui viene creato il campo di input e impostare il valore della proprietà di visualizzazione come"griglia"Per impostarlo in un contenitore a griglia. Successivamente, imposta il contenitore della griglia in "centro"Del Div usando la proprietà giustificata:

.ingresso
display: griglia;
giustificare contento: centro;

L'output dato significa che il campo di input è allineato al centro del div:

Questo è tutto! Abbiamo spiegato il metodo di centrare un campo di input usando CSS.

Conclusione

I campi di input sono posizionati al centro del Div utilizzando tre diversi metodi di CSS, che sono i "griglia"Valori della proprietà Visualizza, il"allineamento", E "margine" proprietà. Queste proprietà consentono di regolare gli elementi secondo le tue esigenze. In questa guida, abbiamo discusso di tre metodi per regolare il campo di input al centro.