Skip to content

Hur man lägger till en webbtext som förblir med sin bild

11 de augusti de 2021
caption that stays with image 3467838 267d31cd53e440b390230c957a5874d6

Vad man ska veta

  • Placera en div -tagg i bilden i HTML -koden:
  • Lägg till ett stilattribut:
  • Ställ in div-bredden på bildbredden, lägg till en textjusteringsegenskap, lägg till utrymme mellan bilden och bildtexten och lägg sedan till texttexten.

Den här artikeln förklarar hur du lägger till en bildtext till din webbbild och ser till att bildtexten förblir med din bild var du än flyttar den på webbsidan.

Steg till en HTML Image Caption

Bildtexter är viktiga eftersom de lägger till extra information till dina visuella webbsidaelement.

Illustration av en person som skriver kod på en bärbar dator och uppdaterar en webbplatsbild med en bildtext

  1. Lägg till en bild på din webbsida.

  2. I HTML -koden för din webbsida, placera en div -tagg runt bilden:

    typ = ”kod”>

  3. Lägg till ett stilattribut till div -taggen:

    typ = ”kod”>

  4. Ställ in bredden på div till samma bredd som bilden med egenskapen width style:

  5. För bildtexter som är något mindre än den omgivande texten lägger du till en typsnittsstorlek till div-stilen:

  6. Bildtexter ser bäst ut om de är centrerade under bilden, så lägg till en textjusterad egenskap till stilattributet:

    typ = ”kod”>

  7. Slutligen lägger du till lite extra utrymme mellan bilden och bildtexten genom att lägga till ett stilattribut till bilden med en egenskap med vadderingsbotten: padding-bottom: 0.5em; ” />

  8. Lägg sedan till texttexten direkt under bilden:

Detta är min caption type = ”code”> Ladda upp webbsidan till din server och testa den i en webbläsare.

Textningstips

CSS -dimensioner kan finnas i många olika mått, så du måste vanligtvis inkludera mättypen. Till exempel: HTML -bilddimensioner är dock alltid i pixlar, så du lämnar mätningen avstängd. Om du gör bredden på div bredare än bildbredden, kan bildtexten visas bredvid bilden. Om detta är vad du vill, lägg till en
tag direkt före bildtexten och efter bildtaggen.