Html: allineamento delle immagini e altri attributi
- Maggio 29, 2011
- by
- Donatantonio
L‘allineamento delle immagini è dipeso in sostanza dagli elementi che circondano l’immagine.
Se ad esempio definiamo un’immagine dopo un div o un paragrafo questa verrà posizionata a capo rispetto al contenuto del blocco precedente.
Più interessante è invece l’allineamento di un’immagine rispetto al testo che lo circonda.
L’attributo align permette di definire il tipo di allineamento dell’immagine:
-
LEFT: l’immagine è allineata alla sinistra del testo
-
RIGHT: l’immagine è allineata alla destra del testo
-
TOP: il testo è allineato con il margine superiore destro dell’immagine
-
MIDDLE: il testo è allineato con il centro dell’immagine
-
BOTTOM: il testo è allineato con il margine inferiore destro dell’immagine
Analizziamo ad esempio il seguente codice html:
<html> <head> <title>POSIZIONAMENTO IMMAGINI</title> </head> <body> <div>Posizionamento di un immagine rispetto al testo : </div> <p align='justify'> <img src='img/promessi.jpg' align='left'/> Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte… …. </body> </html>
All’interno del paragrafo viene definita un’immagine con allineamento a sinistra e di seguito il testo. Il browser interpreterà il codice e darà come risultato la seguente schermata:
In alternativa l’attributo align avrebbe potuto assumere valore right o center:
Bordo delle immagini.
Tramite l’attributo border è possibile impostare una bordatura alle immagini, specificando in pixel lo spessore del bordo:
<img src=‘immagine.jpg’ border=‘2’ alt='Testo alternativo' />
In questo caso l’immagine apparirà con un bordo nero di 2px:
Margine delle immagini.
Nonostante le regole CSS permettano di definire un margine tra un’immagine e gli elementi che lo circondano esiste la possibilità di utilizzare due attributi: vspace e hspace che rispettivamente permettono di definire una spaziatura verticale e una orizzontale per l’immagine in questione.
Ad esempio scrivendo:
<img src=‘immagine.jpg’ alt='Testo alternativo' hspace=‘20’ vspace=’10’ />
impostiamo un’immagine con una spaziatura verticale di 10px e una orizzontale di 20px. In questo caso il margine è suddiviso in maniera equa tra i due lati, in altre parole verticalmente l’immagine avrà un margine destro di 5px e un margine sinistro di 5px, ugualmente un margine superiore di 10px e uno inferiore di 10px.
