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:
[code lang=”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>
[/code]
Esempio 1: vertical-align: bottom
⤽
[code lang=”css”] /**/
.media {
vertical-align: bottom;
}
/**/
[/code]
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
⤽
[code lang=”css”] /**/
.media {
vertical-align: baseline;
}
/**/
[/code]
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
⤽
[code lang=”css”] /**/
.media {
vertical-align: middle;
}
/**/
[/code]
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
⤽
[code lang=”css”] /**/
.media {
vertical-align: top;
}
/**/
[/code]
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
⤽
[code lang=”css”] /**/
.media {
float: left;
}
/**/
[/code]
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
⤽
[code lang=”css”] /**/
.media {
float: right;
}
/**/
[/code]
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.