Come posso allineare verticalmente gli elementi in un div

Durante la scrittura di documenti HTML, spesso aggiungiamo alcuni elementi come immagini, paragrafi e icone. A volte, diventa difficile allineare correttamente gli elementi. Un tag DIV in HTML viene utilizzato come contenitore in un documento HTML. Mentre scriviamo un programma HTML, inseriamo principalmente immagini, testo e icone in un tag DIV. Esistono diversi metodi che aiutano ad allineare gli elementi div in verticale o in orizzontale.

In questo post, discuteremo alcuni dei modi più semplici per allineare gli elementi verticalmente in un div usando HTML e CSS.

Attraverso la proprietà della linea di linea

Uno dei modi più semplici per allineare gli elementi Div in verticale è aggiungere una proprietà di altezza della linea nell'elemento in stile CSS. Se ci sono elementi nell'attributo ID DIV, possono essere allineati dopo l'aggiunta nell'elemento in stile CSS:

Nell'elemento di stile, utilizzare il selettore ID CSS (#ID). Aggiungi la proprietà della linea di linea in essa e definisci l'altezza nei pixel (PX):

L'aggiunta della proprietà dell'altezza della linea e la definizione dell'altezza regola gli elementi del contenitore Div in modo tale da creare la distanza tra le linee in verticale in base al valore definito dall'utente. Ad esempio, se il valore dell'altezza della linea nel codice era 30px anziché 15px, la distanza tra gli elementi DIV sarebbe stata più grande. Quanto segue sarà l'output di questo codice con una distanza di altezza della linea 15px:

Gli elementi sono stati allineati verticalmente usando la proprietà CSS altezza della linea.

Attraverso la proprietà di imbottitura

Per allineare gli elementi verticalmente in una classe Div, esiste un altro metodo facile. Gli elementi possono essere allineati verticalmente facilmente aggiungendo proprietà di imbottitura:

Nell'elemento in stile CSS, aggiungi semplicemente l'imbottitura di imbottitura con un valore nei pixel e aggiungi il peso del bordo:

#demo img
imbottitura: 5px 0;
Bordo: 2px Solid #5C34EB;

Creerà imbottitura attorno a ciascun elemento del div e visualizzerà la seguente uscita:

Nell'elemento Div sopra, tutto ciò che abbiamo fatto è aggiungere una proprietà di imbottitura Nel selettore ID menzionato nell'elemento in stile CSS.

Questi erano i due semplici metodi per allineare gli elementi in un div in verticale.

Conclusione

Per allineare l'elemento Div in verticale, ci sono molti metodi semplici, come l'aggiunta di una proprietà di linea di linea nell'elemento in stile CSS utilizzando un selettore ID che si riferisce all'attributo ID DIV o aggiunta una proprietà di imbottitura nel selettore ID nell'elemento Stile CSS. Questo articolo ha spiegato bene come allineare gli elementi div in verticale.