Come posizionare gli elementi Web con l'allineamento verticale CSS

Allineare verticalmente gli elementi su una pagina web non è sempre stato facile. Non è ancora semplice, ma la proprietà CSS di allineamento verticale può aiutare.

I CSS forniscono diverse proprietà di allineamento. La proprietà text-align, limitata agli elementi blocco e alle celle della tabella, descrive l'allineamento orizzontale. Al contrario, la proprietà di allineamento verticale si applica solo agli elementi in linea e alle celle della tabella.

È possibile utilizzare molti valori diversi per controllare l'allineamento verticale. Alcuni sono relativi all'elemento genitore, altri agli elementi visualizzati sulla stessa linea orizzontale. Scopri esattamente come utilizzare l'allineamento verticale in varie situazioni per ottenere un posizionamento accurato.

I diversi valori di allineamento verticale

La proprietà di allineamento verticale accetta tre tipi distinti di valore: parole chiave, percentuali e lunghezze. Ogni valore rappresenta una posizione verticale in una linea o relativa all'elemento genitore (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 genitore.
top: posiziona la parte superiore dell'elemento di destinazione con la parte superiore dell'elemento più alto nella riga corrente.
middle: centra l'elemento di destinazione all'interno della riga corrente.
bottom: posiziona la parte inferiore dell'elemento di destinazione 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 genitore.
super: posiziona l'elemento di destinazione sulla linea di base dell'apice dell'elemento genitore.
text-top: posiziona l'elemento di destinazione nella parte superiore del carattere dell'elemento genitore.
text-bottom: posiziona l'elemento di destinazione con la parte inferiore del carattere dell'elemento genitore.
percentuale (es. 20%): posiziona la linea di base dell'elemento di destinazione 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 di destinazione 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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <style>
   table {
       border-collapse: collapse;
       width: 100%;
   }
   
   td, th {
       border: 1px solid black;
   }
   </style>
   
   <title>Document</title>
</head>
   
<body>
   
<div id="container">
   
   <a href="http://google.com">Google Search</a>
   
   <img src="https://source.unsplash.com/jFCViYFYcus/300x150" alt=" image of the forest">
   
   <video width="320" controls>
       <source src="videos/ocean_view.mov" type="video/mp4">
       Video of the ocean.
   </video>
   
   <table>
       <tr>
           <th>Scenery</th>
           <th>Discription</th>
       </tr>
       
       <tr>
           <td>Forest</td>
           <td>Lorem ipsum dolor sit amet.</td>
       </tr>
       
       <tr>
           <td>Ocean</td>
           <td>Lorem ipsum dolor sit amet.</td>
       </tr>
   </table>
   
</div>
   
</body>
   
</html>

Il codice HTML riportato sopra crea una semplice pagina Web che visualizza 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, tag

e <li>) sono elementi a blocchi. L'unico modo per allineare verticalmente questi elementi è convertirli prima in elementi in linea, utilizzando la proprietà display.

Tuttavia, alcuni elementi di testo come i tag e sono in linea. Di conseguenza, supportano la proprietà di allineamento verticale. Per allineare verticalmente il testo, assegna semplicemente il valore appropriato alla proprietà di allineamento verticale CSS.

Utilizzando il valore superiore per l'allineamento verticale sul testo

a {
   vertical-align: top;
}

L'aggiunta del codice CSS riportato sopra al documento HTML di base allineerà la parte superiore del testo del tag con la parte superiore dell'elemento più alto nella riga. Producendo il seguente display aggiornato:

Utilizzo del valore percentuale sul testo

a {
    vertical-align: -50%;
}

Il CSS sopra allinea l'elemento di testo in una posizione che è del 50% sotto la linea di base dell'elemento genitore. Produce il seguente output nel tuo browser:

Come puoi vedere nell'immagine sopra, l'elemento testo occupa una posizione sotto gli elementi immagine e video, che sono sulla stessa riga. 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

a {
    vertical-align: 90px;
}

Il codice sopra allinea la linea di base dell'elemento di testo ad una lunghezza di 90 px sopra la linea di base dell'elemento genitore. Ciò produce il seguente output in un browser:

Come allineare verticalmente le immagini

Il tag è un elemento in linea, con cui funziona bene la proprietà CSS vertical-align.

Utilizzo del super valore di allineamento verticale sulle immagini

img {
    vertical-align: super;
}

Il codice sopra posiziona l'immagine sulla linea di base dell'apice dell'elemento genitore. 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 {
    vertical-align: 25%;
}

Il codice sopra allinea la linea di base dell'elemento immagine al 25% sopra la linea di base dell'elemento genitore. Ciò produce il seguente effetto speculare del supervalore:

Utilizzo del valore di lunghezza di allineamento verticale sulle immagini

img {
    vertical-align: 5px;
}

Il codice sopra allinea la linea di base dell'elemento immagine in una posizione 5px sopra la linea di base dell'elemento genitore. Ciò produce un effetto simile a quello dei valori super e 25%:

Come allineare verticalmente i media incorporati

I media incorporati come video e iframe sono elementi HTML incorporati. Pertanto, la proprietà di allineamento verticale CSS funziona benissimo con loro.

Utilizzo del super valore di allineamento verticale su un video

video {
    vertical-align: sub;
}

Il codice sopra posiziona il video sulla linea di base del pedice dell'elemento genitore. 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 {
    vertical-align: -25%;
}

Il codice riportato sopra allinea la linea di base dell'elemento video al 25% sotto la linea di base dell'elemento principale. Ciò produce il seguente effetto specchio del valore secondario:

Utilizzo del valore di lunghezza di allineamento verticale su un video

video {
    vertical-align: -5px;
}

Il codice sopra allinea la linea di base dell'elemento immagine in una posizione 5px sotto la linea di base dell'elemento genitore. Ciò produce un effetto simile ai valori inferiori e -25%:

Come allineare verticalmente gli elementi in una tabella

Usare la proprietà vertical-align con una tabella è un po' complicato, poiché una tabella è un elemento di blocco. Tuttavia, i tag e sono elementi in linea. Pertanto, puoi utilizzare la proprietà di allineamento verticale CSS sul testo all'interno di una tabella.

Utilizzo del valore superiore con allineamento verticale sui dati della tabella

td {
    height: 40px;
    vertical-align: top;
}

Il codice sopra aggiunge un'altezza di 40px a ciascuna cella della tabella. Quindi allinea i dati in ciascuna cella alla parte superiore di ciascuna riga. Ciò produce il seguente output nel browser:

Utilizzo del valore centrale con allineamento verticale sui dati della tabella

td {
    height: 40px;
    vertical-align: middle;
}

Il valore centrale di allineamento verticale nel codice sopra centra verticalmente i dati all'interno di ciascuna cella. Produce il seguente output nel browser:

Utilizzo del valore inferiore con allineamento verticale sui dati della tabella

td {
    height: 40px;
    vertical-align: bottom;
}

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à di allineamento verticale CSS con una serie di diversi elementi incorporati, 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 in linea o in elementi di blocco in linea. Ricorda che puoi combinare l'allineamento verticale con altre proprietà di allineamento, come l'allineamento del testo.