CSS fornisce diverse proprietà di allineamento. La proprietà text-align, limitata agli elementi di blocco e alle celle di tabella, descrive l'allineamento orizzontale. Al contrario, la proprietà vertical-align si applica solo agli elementi inline e alle celle della tabella.
È possibile utilizzare molti valori diversi per controllare l'allineamento verticale. Alcuni sono relativi all'elemento padre, altri agli elementi vengono visualizzati sulla stessa linea orizzontale. Scopri esattamente come puoi utilizzare vertical-align in varie situazioni, per ottenere un posizionamento accurato.
I diversi valori di allineamento verticale
La proprietà vertical-align accetta tre tipi distinti di valore: parole chiave, percentuali e lunghezze. Ogni valore rappresenta una posizione verticale in una linea o relativa all'elemento padre (contenitore) dell'elemento di destinazione.
I principali valori di allineamento verticale sono:
- linea di base: posiziona l'elemento di destinazione all'interno della linea di base dell'elemento padre.
- top: posiziona la parte superiore dell'elemento target con la parte superiore dell'elemento più alto nella riga corrente.
- medio: centra l'elemento di destinazione all'interno della riga corrente.
- bottom: posiziona la parte inferiore dell'elemento target con la parte inferiore dell'elemento più basso nella riga corrente.
- sub: posiziona l'elemento di destinazione con la linea di base del pedice dell'elemento padre.
- super: posiziona l'elemento di destinazione sulla linea di base in apice dell'elemento padre.
- text-top: posiziona l'elemento target in cima al font dell'elemento genitore.
- text-bottom: posiziona l'elemento target con la parte inferiore del font dell'elemento genitore.
- percentuale (es. 20%): posiziona la linea di base dell'elemento target in un punto sopra, sotto o sulla linea di base dell'elemento genitore. Questo valore può essere negativo o positivo.
- lunghezza (es. 10em): posiziona la linea di base dell'elemento target in un punto sopra, sotto o sulla linea di base dell'elemento genitore. Questo valore può essere negativo o positivo.
Un modello HTML di base
Documento
Scenario
Discrizione
foresta
Lorem ipsum dolor sit amet.
Oceano
Lorem ipsum dolor sit amet.
Il codice HTML sopra crea una semplice pagina Web che mostra quattro elementi: testo collegato, un'immagine, un video incorporato e una tabella. Dovrebbe apparire così nel tuo browser:
Come allineare verticalmente il testo
Per impostazione predefinita, la maggior parte degli elementi di testo (come intestazioni,
, e
Tuttavia, alcuni elementi di testo come il e tag sono in linea. Di conseguenza, supportano la proprietà vertical-align. Per allineare verticalmente il testo, assegna semplicemente il valore appropriato alla proprietà CSS vertical-align.
Usando il valore superiore di allineamento verticale sul testo
un {
allineamento verticale: in alto;
}
Aggiungendo il codice CSS sopra al documento HTML di base allineerà la parte superiore del file tagga il testo con la parte superiore dell'elemento più alto della riga. Produzione del seguente display aggiornato:
Utilizzo del valore percentuale sul testo
un {
allineamento verticale: -50%;
}Il CSS sopra allinea l'elemento di testo in una posizione che è il 50% al di sotto della linea di base dell'elemento padre. Produce il seguente output nel tuo browser:
Come puoi vedere nell'immagine sopra, l'elemento testo occupa una posizione al di sotto degli elementi immagine e video, che sono sulla stessa linea. Per posizionare questo elemento in corrispondenza o al di sopra della linea di base, utilizzare un valore percentuale positivo.
Utilizzo del valore di lunghezza sul testo
un {
allineamento verticale: 90px;
}
Il codice sopra allinea la linea di base dell'elemento di testo a una lunghezza di 90 px sopra la linea di base dell'elemento padre. Questo produce il seguente output in un browser:
Come allineare verticalmente le immagini
Il tag è un elemento inline, con cui la proprietà CSS vertical-align funziona bene.
Usando il super valore di allineamento verticale sulle immagini
img {
allineamento verticale: super;
}
Il codice sopra posiziona l'immagine sulla linea di base in apice dell'elemento padre. Ciò significa in una posizione sopra la linea di base, come puoi vedere nel seguente output:
Utilizzo del valore percentuale di allineamento verticale sulle immagini
img {
allineamento verticale: 25%;
}
Il codice sopra allinea la linea di base dell'elemento dell'immagine al 25% sopra la linea di base dell'elemento padre. Questo produce il seguente effetto specchio del super valore:
Utilizzo del valore della lunghezza di allineamento verticale sulle immagini
img {
allineamento verticale: 5px;
}
Il codice sopra allinea la linea di base dell'elemento dell'immagine in una posizione 5px sopra la linea di base dell'elemento padre. Questo produce un effetto simile a quello dei valori super e 25%:
I media incorporati come video e iframe sono elementi HTML in linea. Pertanto, la proprietà CSS vertical-align funziona benissimo con loro.
Usando il super valore di allineamento verticale su un video
video {
allineamento verticale: sub;
}
Il codice sopra posiziona il video sulla linea di base dell'indice dell'elemento padre. Ciò significa in una posizione al di sotto della linea di base, come puoi vedere nel seguente output:
Utilizzo del valore percentuale di allineamento verticale su un video
video {
allineamento verticale: -25%;
}
Il codice sopra allinea la linea di base dell'elemento video al 25% al di sotto della linea di base dell'elemento padre. Questo produce il seguente effetto specchio del valore secondario:
Utilizzando il valore di lunghezza di allineamento verticale su un video
video {
allineamento verticale: -5px;
}
Il codice sopra allinea la linea di base dell'elemento dell'immagine in una posizione 5px sotto la linea di base dell'elemento padre. Questo produce un effetto come i valori sub e -25%:
Come allineare verticalmente gli elementi in una tabella
L'uso della proprietà vertical-align con una tabella è un po' complicato, poiché una tabella è un elemento di blocco. comunque, il
Utilizzando il valore superiore di allineamento verticale sui dati della tabella
td {
altezza: 40px;
allineamento verticale: in alto;
}
Il codice sopra aggiunge un'altezza di 40px a ciascuna cella della tabella. Quindi allinea i dati in ogni cella all'inizio di ogni riga. Questo produce il seguente output nel browser:
Usando il valore centrale di allineamento verticale sui dati della tabella
td {
altezza: 40px;
vertical-align: medio;
}
Il valore centrale di allineamento verticale nel codice sopra centra verticalmente i dati all'interno di ogni cella. Produce il seguente output nel browser:
Utilizzando il valore inferiore di allineamento verticale sui dati della tabella
td {
altezza: 40px;
allineamento verticale: inferiore;
}
Il codice sopra allinea i dati in ogni cella alla fine di ogni riga. Produce il seguente output nel browser:
Ora puoi allineare gli elementi sulla tua pagina web
Ora puoi utilizzare la proprietà CSS vertical-align con una serie di diversi elementi inline, inclusi testo, contenuti multimediali incorporati e dati di tabelle. La regola generale è che la proprietà vertical-align funziona solo su elementi inline e inline-block.
Tuttavia, puoi utilizzare questa proprietà sugli elementi di blocco, devi solo convertirli prima in elementi inline o inline-block. Ricorda che puoi combinare vertical-align con altre proprietà di allineamento, come text-align.
Allinea le cose con la proprietà di allineamento del testo CSS
Leggi Avanti
Argomenti correlati
- Programmazione
- Programmazione
- CSS
- HTML
- Web design
Circa l'autore
Kadeisha Kean è uno sviluppatore di software full-stack e uno scrittore tecnico/tecnologico. Ha la spiccata capacità di semplificare alcuni dei concetti tecnologici più complessi; produrre materiale che può essere facilmente compreso da qualsiasi principiante della tecnologia. È appassionata di scrittura, sviluppo di software interessanti e viaggi per il mondo (attraverso i documentari).
Iscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti
