Flytta text runt en bild med HTML eller CSS

När du placerar en bild på din webbplats visar den som standard antingen ovanför eller under omgivande text, vilket skapar tomma områden till vänster och höger om bilden. Detta slösar utrymme och gör att bilden känns fristående från resten av innehållet. En enkel lösning är att låta texten omsluta bilden – antingen med HTML‑attribut eller med CSS‑stilar. Följ nedan för att skapa en mer sammanhängande layout.

Med HTML

Steg 1 – Lägg till attributet align

Öppna din HTML‑fil i ett textredigeringsprogram och placera markören inne i <img>‑taggen. Lägg till attributet align="…" direkt efter src, exempel:

<img src="bild.jpg" align="…" alt="Beskrivning">

Steg 2 – Välj placering

Sätt ett av följande värden efter align för att styra hur bilden placeras i förhållande till texten:

• left – bilden placeras till vänster, texten flyter till höger.
• right – bilden placeras till höger, texten flyter till vänster.
• top – bilden visas högst upp i linjen, texten följer efter.
• middle – bilden centreras vertikalt i linjen.
• bottom – bilden placeras längst ner i linjen.

Spara filen när du är klar.

Med CSS

Steg 1 – Lägg till en style-attribut

Placera markören inne i <img>‑taggen och lägg till ett style-attribut, t.ex.:

<img src="bild.jpg" style="…" alt="Beskrivning">

Steg 2 – Använd float

I style-attributet skriver du float: left; eller float: right; för att låta texten flyta runt bilden:

<img src="bild.jpg" style="float: left; margin: 0 1em 1em 0;" alt="Beskrivning">

Med float: left placeras bilden till vänster och texten flyter till höger; med float: right sker motsatsen. Lägg gärna till marginaler för att ge avstånd mellan bild och text. Spara sedan dokumentet.