Questa guida illustra la procedura per l'allineamento orizzontale e verticale utilizzando i CSS.
Come allineare orizzontalmente e verticalmente usando i CSS?
Gli sviluppatori utilizzano l'allineamento 'orizzontale' e 'verticale' per disporre e posizionare gli elementi su una pagina Web in modo più organizzato. Possono essere utili per allineare elementi e contenuti, posizionare pulsanti o icone, ecc. Seguire gli esempi seguenti per una migliore comprensione:
Allineamento orizzontale
Nei CSS, la proprietà text-align viene utilizzata per allineare orizzontalmente il testo all'interno del suo elemento genitore. Visita i seguenti frammenti di codice per una migliore comprensione:
< corpo >
< div classe = 'account' >
< div classe = 'allinea a sinistra' > Linuxhint è allineato a sinistra < / div >
< div classe = 'centerAlign' > Linuxhint è allineato al centro < / div >
< div classe = 'destraAllinea' > Linuxhint è allineato a destra < / div >
< / div >
< / corpo >
Nello snippet di codice sopra:
- Primo, il genitore” div L'elemento 'è utilizzato con un attributo di classe con un valore di' account ”.
- Successivamente, sono stati creati tre elementi figlio e l'attributo class è stato assegnato a ciascun div.
- Alla fine, vengono forniti alle classi i valori di 'leftAlign', 'centerAlign' e 'rightAlign'.
Ora, inserisci le seguenti proprietà CSS nel file '
.leftAlign {
Schermo : blocco in linea ;
larghezza : 30% ;
imbottitura : 20px ;
colore di sfondo : verde foresta ;
allineamento del testo : Sinistra ;
}
.centerAlign {
Schermo : blocco in linea ;
larghezza : 30% ;
colore di sfondo : rosso ;
imbottitura : 20px ;
allineamento del testo : centro ;
}
.rightAlign {
Schermo : blocco in linea ;
larghezza : 30% ;
colore di sfondo : verde acqua ;
imbottitura : 20px ;
allineamento del testo : Giusto ;
}
>
Nel blocco di codice sopra:
- Innanzitutto, tutte e tre le classi vengono selezionate separatamente, quindi vengono applicate le proprietà CSS ' Schermo ”, “ larghezza ”, “ colore di sfondo ' E ' imbottitura ' a loro. Queste proprietà vengono utilizzate per migliorare la visualizzazione.
- Successivamente, i valori di ' Sinistra ”, “ centro ' E ' Giusto ” sono forniti al “ allineamento del testo ” proprietà al “ leftAlign ”, “ centerAlign ', E ' rightAlign ” classi, rispettivamente.
Dopo il processo di compilazione, gli elementi HTML hanno questo aspetto:
L'istantanea sopra del browser mostra che gli elementi sono allineati orizzontalmente nelle posizioni sinistra, centrale e destra.
Allineamento verticale
Il CSS” allineamento verticale ” allinea l'elemento selezionato al “ asse y ” all'interno del loro elemento genitore. I valori possibili per la proprietà 'vertical-align' sono ' linea di base ”, “ sub ”, “ super ”, “ superiore ”, “ text-top ”, “ mezzo ”, “ metter il fondo a ', E ' testo in basso ”. Tuttavia, gli sviluppatori utilizzano principalmente valori 'top', 'middle' e 'bottom' durante la creazione di progetti di pagine web. Per allineare l'elemento HTML selezionato nella prima posizione, visita il seguente frammento di codice:
< div classe = 'contare' >< imm src = 'hiunsplash.jpg' larghezza = '200px' altezza = '200px' >
< span classe = 'captionTopAlign' > Questo testo è allineato in alto verticalmente accanto all'immagine < / span >
< / div >
Nello snippet di codice sopra:
- Innanzitutto, crea un genitore ' div ” e assegna un valore di “ contare ' al ' classe 'attributo.
- All'interno del contenitore padre, utilizzare il '
” tag e fornire il percorso dell'immagine come valore per il “ src 'attributo. - Inoltre, fornire il valore di ' 200 pixel ” ad entrambi i “ larghezza ' E ' altezza ' attributi del '
etichetta '. - Successivamente, utilizza il ' ” etichetta e forniscigli una classe di “ captionTopAlign ”. Alla fine, forniscigli dati fittizi.
Ora aggiungi le proprietà CSS per dare uno stile agli elementi HTML:
.contare {larghezza : fit-content ;
Schermo : bloccare ;
margine sinistro : 100 pixel ;
imbottitura : 10px ;
confine : 2px solido rosso ;
}
.captionTopAlign {
verticale
Nel blocco di codice sopra:
- Innanzitutto, seleziona il genitore ' contare ” e fornire i valori di “fit-content”, “block”, “100px”, “10px” e “2px solid red” al CSS “ larghezza ”, “ Schermo ”, “ margine sinistro ”, “ imbottitura ' E ' confine ' proprietà. Queste proprietà vengono utilizzate per definire lo stile dell'elemento padre.
- Quindi, seleziona ' captionTopAlign ” class e fornire il valore di “ superiore ” al CSS “ allineamento verticale ' proprietà. Questo allinea l'elemento HTML alla prima posizione.
Dopo l'esecuzione delle suddette righe di codice, la pagina web appare così:
L'istantanea sopra mostra che l'elemento HTML selezionato è ora allineato in alto. Allo stesso modo, l'elemento può essere allineato nelle direzioni centrale, inferiore, ecc.
Conclusione
Per l'allineamento orizzontale e verticale, il ' allineamento del testo ' E ' allineamento verticale Vengono utilizzate rispettivamente le proprietà CSS. La proprietà 'text-align' consente il valore di ' Sinistra ”, “ Giusto ”, “ centro ' E ' giustificare ”. D'altra parte, i valori possibili per la proprietà 'vertical-align' sono ' linea di base ”, “ sub ”, “ super ”, “ superiore ”, “ text-top ”, “ mezzo ”, “ metter il fondo a ', E ' testo in basso ”. L'allineamento orizzontale e verticale aiuta a creare progetti web puliti e professionali.