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:
Esempio 1:
Qui vediamo un’immagine con lo style
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:
Qui vediamo l’immagine con la proprietà
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:
Questo prova l’allineamento verticale del testo e le immagini con CSS
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:
Questo prova l’allineamento verticale del testo e le immagini con CSS
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> <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>
vertical-align: bottom
⤽
/**/ .media { vertical-align: bottom; } /**/
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
⤽
/**/ .media { vertical-align: baseline; } /**/
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
⤽
/**/ .media { vertical-align: middle; } /**/

vertical-align: top
⤽
/**/ .media { vertical-align: top; } /**/

float: left
⤽
/**/ .media { float: left; } /**/
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
⤽
/**/ .media { float: right; } /**/
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.
Similari
⋮ Creare capilettera con i CSS ⋮
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 ⋮
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 ⋮
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 ⋮
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 ⋮
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…
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…
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,…
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…
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 …
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…