L'impostazione di immagini e didascalie in un corpo di testo è una funzione di base di HTML, come è stato progettato per emulare le tradizionali tecniche di layout di stampa. Nelle prime versioni di HTML, l'attributo "allineare" del tag "img" è stato utilizzato per spingere un'immagine a sinistra o a destra in un blocco di tipo, ma questa tecnica non aveva sufficiente controllo e ormai obsoleta. Fogli di stile CSS sono stati introdotti con la specifica HTML 4.0, consente di controllare il modo in un'immagine e la didascalia vengono impostate in un blocco di tipo precisamente.
Istruzioni
1
Inserire il seguente codice tra i tag di "head" del documento HTML:
< style type = "text/css" >
span.RightAlign
{
float: right;
text-align: center;
font-size: 75%;
}
< / stile >
La prima riga dopo il tag "style" è una dichiarazione di classe CSS, che dice che qualsiasi tag "span" assegnata la classe "rightalign" erediterà le proprietà tra parentesi graffe. La proprietà di "galleggiare" causa testo e altri contenuti avvolgere fluidamente l'elemento. La proprietà "text-align" centra la didascalia sotto l'immagine. È possibile utilizzare "sinistra" o "destra" invece, se si preferisce. La proprietà "font-size" vi farà la didascalia 75 per cento inferiore al resto del testo; Questo valore può anche essere regolato.
2
Aggiungere il seguente codice al corpo del documento HTML dove si desidera che l'immagine venga visualizzata, sostituendo "image. jpg" con il percorso di e il nome file dell'immagine:
< span class = "rightalign" >< img attributo assegna le proprietà CSS definito nel passaggio precedente per questo tag "span". Se si inserisce un blocco di testo, l'immagine verrà visualizzata sulla riga successiva disponibile, giustificato a destra con il testo a capo in modo fluido intorno ad esso e la didascalia.
3
Aggiungere "Margine", "Confine" e "Padding" proprietà alla dichiarazione della classe nella sezione head del documento HTML per regolare l'area che circonda l'immagine e la didascalia. Provare il seguente esempio per vedere come funzionano queste proprietà:
span.RightAlign
{
float: right;
text-align: center;
font-size: 75%;
margine: 3px;
border: 1px grigio solido;
padding: 3px;
}