Wat te weten
- Plaats in de HTML een div-tag rond de afbeelding:
- Voeg een stijlkenmerk toe:
- Stel de div-breedte in op de afbeeldingsbreedte, voeg een eigenschap text-align toe, voeg ruimte toe tussen de afbeelding en het bijschrift en voeg vervolgens het tekstbijschrift toe.
In dit artikel wordt uitgelegd hoe u een bijschrift aan uw webafbeelding toevoegt en ervoor zorgt dat het bijschrift bij uw afbeelding blijft, waar u het ook verplaatst op de webpagina.
Stappen naar een HTML-afbeeldingsbijschrift
Afbeeldingsbijschriften zijn belangrijk omdat ze extra informatie toevoegen aan uw visuele webpagina-elementen.
-
Voeg een afbeelding toe aan uw webpagina.
-
Plaats in de HTML voor uw webpagina een div-tag rond de afbeelding:
type=”code”>
-
Voeg een stijlkenmerk toe aan de div-tag:
type=”code”>
-
Stel de breedte van de div in op dezelfde breedte als de afbeelding, met de eigenschap width:
-
Voor bijschriften die iets kleiner zijn dan de omringende tekst, voegt u een eigenschap font-size toe aan de div-stijl:
-
Bijschriften zien er het beste uit als ze onder de afbeelding worden gecentreerd, dus voeg een eigenschap text-align toe aan het stijlkenmerk:
type=”code”>
-
Voeg ten slotte wat extra ruimte toe tussen de afbeelding en het bijschrift, door een stijlkenmerk aan de afbeelding toe te voegen met een stijleigenschap padding-bottom: padding-bottom:0.5em;” />
-
Voeg vervolgens het tekstbijschrift direct onder de afbeelding toe:
Dit is mijn onderschrift type=”code”> Upload de webpagina naar uw server en test deze in een browser.
Tips voor ondertiteling
CSS-dimensies kunnen in veel verschillende afmetingen zijn, dus u moet meestal het type meting opnemen. Bijvoorbeeld: HTML-afbeeldingsafmetingen zijn altijd in pixels, dus u laat de meting uit. Als u de breedte van de div breder maakt dan de afbeeldingsbreedte, kan het bijschrift naast de afbeelding verschijnen. Als dit is wat je wilt, voeg dan een toe
tag direct voor het bijschrift en na de afbeeldingstag.
