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.
⤽
Prima di seguire, gli attributi
La proprietà
Alcuni Esempialign
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. |
⤽
Supponiamo di avere il seguente codice HTML:
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:
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:
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:
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:
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:
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.
[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: <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]
vertical-align: bottom
⤽
[code lang=”css”]
/**/
.media {
vertical-align: bottom;
}
/**/
[/code]
Qui vediamo un’immagine con lo style .media {
vertical-align: bottom;
}
/**/
[/code]
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.
vertical-align: baseline
⤽
[code lang=”css”]
/**/
.media {
vertical-align: baseline;
}
/**/
[/code]
Qui vediamo l’immagine con la proprietà .media {
vertical-align: baseline;
}
/**/
[/code]
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.
vertical-align: middle
⤽
[code lang=”css”]
/**/
.media {
vertical-align: middle;
}
/**/
[/code]
.media {
vertical-align: middle;
}
/**/
[/code]

vertical-align: top
⤽
[code lang=”css”]
/**/
.media {
vertical-align: top;
}
/**/
[/code]
.media {
vertical-align: top;
}
/**/
[/code]

float: left
⤽
[code lang=”css”]
/**/
.media {
float: left;
}
/**/
[/code]
Questo prova l’allineamento verticale del testo e le immagini con CSS .media {
float: left;
}
/**/
[/code]
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.
float: right
⤽
[code lang=”css”]
/**/
.media {
float: right;
}
/**/
[/code]
Questo prova l’allineamento verticale del testo e le immagini con CSS .media {
float: right;
}
/**/
[/code]
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.