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

Quando includi un'immagine con il testo nella tua pagina Web, lo stile predefinito visualizza l'immagine sopra o sotto il contenuto circostante, lasciando uno spazio bianco a sinistra ea destra dell'immagine. Questo spreca spazio e fa apparire l'immagine disgiunta dal testo. Per risolvere questo problema, hai la possibilità di utilizzare HyperText Markup Language (HTML) o Cascading Style Sheets (CSS) per specificare il posizionamento dell'immagine in modo che il testo si disponga intorno ai bordi dell'immagine. Usa HTML o CSS per spostare il testo intorno alle tue immagini, come preferisci.

HTML

Passo 1

Avvia il file di pagina nell'editor di testo del tuo computer e posiziona il cursore all'interno del "" tag. Digita "align=" e segui questo con le virgolette in questo modo:

Passo 2

Inserisci "destra", "sinistra", "centro", "alto" o "basso" dopo la voce di allineamento per specificare dove appare la tua immagine in relazione al testo. Un allineamento "in alto" fa apparire il tuo contenuto nel punto più alto dell'immagine, il "centro" sposta il testo al centro della foto e il "basso" fa in modo che il contenuto inizi nella parte inferiore della grafica. Inoltre, una posizione "a destra" sposta i dati a sinistra dell'immagine e un allineamento a "sinistra" posiziona il contenuto a destra dell'immagine. Digita il tuo codice come segue:

Salva il file.

CSS

Passo 1

Posiziona il cursore all'interno del "" tagga e digita "style=" con una serie di virgolette prima dell'ultima parentesi angolare. Per illustrare:

Passo 2

Immettere "float:" all'interno delle virgolette e digitare l'attributo "left" o "right" per denominare l'allineamento del grafico. Il valore "sinistra" fa apparire la tua immagine a sinistra e sposta il testo a destra, mentre l'attributo "destra" fa l'opposto. Per esempio:

Salva il tuo documento.