Quando si inserisce un’immagine o del testo in un documento HTML, per default il testo viene allineato verticalmente al basale (baseline), questa è la linea di base del testo e l’immagine. Usando le proprietà CSS vertical-align possiamo modificare questo comportamento e allineare il testo con l’immagine come preferiamo. Per fa sì che il testo circondi l’immagine viene utilizzato proprietà float di CSS applicata all’immagine.

Regole
⤽
Prima di seguire, gli attributi align e valign nelle immagini sono deprecate.
La proprietà vertical-align viene utilizzato per indicare dove il testo dovrà essere allineato verticalmente rispetto all’immagine. Supporta i seguenti valori:

Valore Descrizione
length Aumenta o diminuisce l’elemento spazio indicato (ad esempio, in pixel). Supporta valori negativi.
% Aumenta o diminuisce l’elemento percentuale indicato secondo la proprietà “line-height“. Supporta valori negativi.
baseline Allinea l’elemento con la linea di base dell’elemento padre. Questa è l’impostazione predefinita.
sub Allinea l’elemento come se fosse un sottoindice.
super Allinea l’elemento come se fosse un superíndice.
top Il punto più alto di un elemento è allineato con il punto di un altro elemento nella linea.
text-top Il punto più alto di un elemento è allineato con il punto più alto del font dell’elemento genitore.
middle L’elemento è posto al centro dell’elemento genitore.
bottom Il punto più basso dell’elemento è allineato con l’elemento più basso sulla linea.
text-bottom Il punto basso dell’elemento è allineato con il punto più basso del font dell’elemento genitore.
inherit Specifica che il valore della proprietà vertical-align viene ereditata dall’elemento genitore.
Alcuni Esempi
⤽
Supponiamo di avere il seguente codice HTML:
<body>
<img src="percorso/immagine.png" class="media" /> Nulla viverra viverra nunc, ac porttitor metus adipiscing ac. Etiam et lectus diam, in porta enim. Aliquam erat volutpat. Aliquam at arcu diam, at eleifend lorem.
</body>
Esempio 1: vertical-align: bottom
⤽
/**/
.media {
  vertical-align: bottom;
}
/**/
Qui vediamo un’immagine con lo style vertical-align: bottom;. Si otterrebbe anche con il CSS applicandolo alla classe che è stato messo all’immagine, in questo caso la classe è “media“. Si noti come l’immagine e il testo sono allineati secondo l’elemento più in basso dei due che sono sulla stessa linea.
Nulla viverra viverra nunc, ac porttitor metus adipiscing ac. Etiam et lectus diam, in porta enim. Aliquam erat volutpat. Aliquam at arcu diam, at eleifend lorem.
Esempio 2: vertical-align: baseline
⤽
/**/
.media {
  vertical-align: baseline;
}
/**/
Qui vediamo l’immagine con la proprietà vertical-align: baseline;. Si Ottiene la stessa cosa senza mettere niente, perché è il valore predefinito di vertical-align. Si noti come, a differenza di bottom, immagine e testo sono allineati sulla linea di base.
Nulla viverra viverra nunc, ac porttitor metus adipiscing ac. Etiam et lectus diam, in porta enim. Aliquam erat volutpat. Aliquam at arcu diam, at eleifend lorem.
Esempio 3: vertical-align: middle
⤽
/**/
.media {
  vertical-align: middle;
}
/**/
Nulla viverra viverra nunc, ac porttitor metus adipiscing ac. Etiam et lectus diam, in porta enim. Aliquam erat volutpat. Aliquam at arcu diam, at eleifend lorem.
Esempio 4: vertical-align: top
⤽
/**/
.media {
  vertical-align: top;
}
/**/
Nulla viverra viverra nunc, ac porttitor metus adipiscing ac. Etiam et lectus diam, in porta enim. Aliquam erat volutpat. Aliquam at arcu diam, at eleifend lorem.
Esempio 5: float: left
⤽
/**/
.media {
  float: left;
}
/**/
Questo prova l’allineamento verticale del testo e le immagini con CSS float: left. Il testo è sempre a sinistra dell’immagine avvolgendo l’immagine fino a che la quantità di testo occupi le linee necessarie per andare sotto l’immagine.
Nulla viverra viverra nunc, ac porttitor metus adipiscing ac. Etiam et lectus diam, in porta enim. Aliquam erat volutpat. Aliquam at arcu diam, at eleifend lorem.
Esempio 6: float: right
⤽
/**/
.media {
  float: right;
}
/**/
Questo prova l’allineamento verticale del testo e le immagini con CSS float: right. Il testo è sempre a destra dell’immagine avvolgendo l’immagine fino a che la quantità di testo occupi le linee necessarie per andare sotto l’immagine.
Nulla viverra viverra nunc, ac porttitor metus adipiscing ac. Etiam et lectus diam, in porta enim. Aliquam erat volutpat. Aliquam at arcu diam, at eleifend lorem.
Similari
⋮ Regole fastidiose ai web designer ⋮
83% Css3 ⊚
Per la maggior parte dei webdesigner, lo stile di un sito web con i CSS è abbastanza semplice. Fintanto che il codice HTML è semantico e i div e le classi sono progettati in modo sensibile, il processo di sviluppo dovrebbe…
⋮ Python per tutti ⋮
56% Python ⊚
[nextpage title=”Copertina”] Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
⋮ Fondamentali di jQuery ⋮
45% JQuery ⊚
[nextpage title=”Benvenuti”] jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
⋮ Parsing XML con SimpleXML ⋮
34% Php ⊚
Analizzare l’XML significa essenzialmente la navigazione attraverso un documento in formato XML per la restituzione dei dati pertinenti. Un numero crescente di servizi web restituiscono i dati in formato JSON, ma un gran n…
⋮ Problemi di Internet Explorer con CSS ⋮
28% Css ⊚
Cercando di ottenere siti web CSS-based con lo stesso aspetto in tutti i browser spesso può essere difficile. Molti dei problemi invece si trovano con Internet Explorer che implementa dei comandi CSS diversamente da altri,…