Nwlapcug.com


Come giustificare a destra un'immagine & didascalia circondato da testo in un elemento HTML

Come giustificare a destra un'immagine & didascalia circondato da testo in un elemento HTML


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;

}