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
⋮ Creare capilettera con i CSS ⋮
18% Css ⊚
Scopriamo come può utilizzare i CSS per visualizzare la prima lettera di una notizia con una dimensione superiore al resto del testo, come in alcuni quotidiani o blogs. [expand title=”Due approcci possibili” startwrap=”” e…
⋮ Problemi di Internet Explorer con CSS ⋮
10% 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,…
⋮ Parsing XML con SimpleXML ⋮
8% 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…
⋮ L’elemento time HTML5 è tornato e migliore che mai ⋮
7% Html5 ⊚
L’elemento time HTML5 era al punto di sparire l’anno scorso. L’editore Ian Hickson l’aveva eliminato dalle specifiche HTML5, ma poi il W3C, il gruppo che sovrintende HTML5, è intervenuta per soprassedere alla decisione di …
⋮ Regole fastidiose ai web designer ⋮
7% 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…