Nwlapcug.com


Come spostare il testo intorno a un'immagine con HTML o CSS

Come spostare il testo intorno a un'immagine con HTML o CSS


Quando si include un'immagine con il testo sulla tua pagina Web, lo stile di default consente di visualizzare il grafico sopra o sotto il contenuto circostante, lasciando uno spazio vuoto a sinistra e a destra dell'immagine. Questo spreco di spazio e rende l'immagine appaiono disgiunto dal tuo testo. Per risolvere questo problema, hai la possibilità di utilizzare HyperText Markup Language (HTML) o Cascading Style Sheets (CSS) per specificare la posizione dell'immagine in modo che il testo viene disposto intorno ai bordi dell'immagine. Utilizzare HTML o CSS per spostare il testo intorno a immagini, come si preferisce.

Istruzioni

HTML

1

Lanciare il file di pagina nel programma di editor di testo del tuo computer e posizionare il cursore all'interno del tag "< img >". Tipo "align =" e seguire questo con le virgolette in questo modo:

< img align = "" / >

2

Immettere "diritto", "sinistra", "medio", "superiore" o "inferiore" dopo l'entrata di allinea per specificare dove l'immagine viene visualizzata in relazione al testo. Un allineamento di "top" rende i contenuti vengono visualizzati nel punto più alto della vostra immagine, il "mezzo" si muove il testo al centro della foto e il "fondo" indirizza il contenuto inizia nella parte inferiore dell'immagine. Inoltre, una posizione di "destra", sposta i dati a sinistra dell'immagine e un allineamento a "sinistra" colloca il contenuto a destra dell'immagine. Digitare il codice come segue:

< img align = "top" / >

3

Salvare il file.

CSS

4

Posizionare il cursore all'interno del tag "< img >" e tipo "style =" con un set di virgolette prima della parentesi angolare Ultima. Per illustrare:

< img style = "" / >

5

Immettere "galleggiante:" dentro la citazione segna e digita "sinistra" o "destra" attributo per citarne l'allineamento dell'immagine. Il valore di "sinistra" rende l'immagine visualizzata a sinistra e sposta il testo a destra, mentre l'attributo "giusto" fa l'opposto. Per esempio:

< img style = "float: right" / >

6

Salvare il documento.