Inhoud
beoordeeld door
Hier is een betrouwbare methode voor het toevoegen van een eenvoudig, maar aantrekkelijk bijschrift aan een afbeelding die bij de afbeelding blijft, waar u deze ook op de webpagina verplaatst.
Stappen voor een HTML-afbeeldingsbijschrift
-
Voeg een afbeelding toe aan je webpagina.
-
Plaats in de HTML voor uw webpagina een div-tag rond de afbeelding:
-
Voeg een stijlkenmerk toe aan de div-tag:
style = ""> -
Stel de breedte van de div in op dezelfde breedte als de afbeelding, met de eigenschap width style:
-
Voor bijschriften die iets kleiner zijn dan de omringende tekst, voegt u een eigenschap lettergrootte toe aan de div-stijl:
-
Bijschriften zien er het beste uit als ze onder de afbeelding zijn gecentreerd, dus voeg een eigenschap tekstuitlijning toe aan het stijlkenmerk:
-
Voeg ten slotte een beetje extra ruimte toe tussen de afbeelding en het bijschrift, door een stijlkenmerk aan de afbeelding toe te voegen met een eigenschap voor opvulling onderaan:
style = "padding-bottom: 0.5em;" />
-
Voeg vervolgens het tekstbijschrift direct onder de afbeelding toe:
Upload de webpagina naar uw server en test deze in een browser.
Ondertitelingstips
CSS-afmetingen kunnen in veel verschillende afmetingen zijn, dus u moet meestal het type meting opnemen. Bijvoorbeeld:
De afmetingen van HTML-afbeeldingen zijn echter altijd in pixels, dus u laat de meting weg.
Als u de breedte van de div breder maakt dan de afbeeldingsbreedte, wordt het bijschrift mogelijk naast de afbeelding weergegeven. Als dit is wat je wilt, voeg dan een toe
tag direct voor het bijschrift en na de afbeeldingstag.
