Hur man flyttar text runt en bild med HTML eller CSS

När du tar med en bild med texten på din webbsida, visas standardstilen grafiken ovanför eller under det omgivande innehållet och lämnar vitt utrymme till vänster och höger om bilden. Detta slösar bort utrymme och får bilden att se ojämn från din text. För att åtgärda detta har du möjlighet att använda antingen HyperText Markup Language (HTML) eller Cascading Style Sheets (CSS) för att ange bildens placering så att texten lindas runt bildens kanter. Använd HTML eller CSS för att flytta text runt dina bilder, som du föredrar.

HTML

Steg 1

Starta sidfilen i datorns textredigeringsprogram och placera markören i ""tag. Skriv" align = "och följ detta med citattecken så:

Steg 2

Ange "höger", "vänster", "mitten", "överst" eller "botten" efter justeringsposten för att ange var din bild ska visas i förhållande till din text. En "topp" -justering gör att ditt innehåll visas vid den högsta punkten i din bild, "mitten" flyttar texten till mitten av fotot och "botten" leder innehållet till att börja längst ner i grafiken. Dessutom flyttar en "höger" position dina data till vänster om bilden och en "vänster" inriktning placerar innehåll till höger om bilden. Skriv in din kod enligt följande:

Spara filen.

CSS

Steg 1

Placera markören i ""tag och typ" style = "med en uppsättning citattecken före den sista vinkelfästet. För att illustrera:

Steg 2

Ange "float:" i citattecken och skriv attributet "left" eller "right" för att namnge grafikens inriktning. "Vänster" -värdet gör att din bild visas till vänster och flyttar din text till höger, medan attributet "höger" gör det motsatta. Till exempel:

Spara ditt dokument.