Lisää verkkoteksti, joka pysyy kuvan mukana

Mitä tietää

• Aseta HTML-koodiin div-tunniste kuvan ympärille ja lisää div-tyylinen attribuutti.
• Aseta div-leveys kuvan leveydeksi, lisää tekstin tasausominaisuus, lisää tilaa kuvan ja kuvatekstin väliin ja lisää sitten kuvateksti.

Tässä artikkelissa kerrotaan, kuinka voit lisätä kuvatekstin verkkokuvaasi ja varmistaa, että kuvateksti pysyy kuvan mukana kaikkialla, missä siirrät sen verkkosivulla.

Vaiheet HTML-kuvatekstiin

Kuvatekstit ovat tärkeitä, koska ne lisäävät lisätietoa verkkosivusi visuaalisiin elementteihin.

1. Lisää kuva verkkosivullesi.

2. Sijoita web-sivusi HTML-koodiin div-tunniste kuvan ympärille:

   <div><img src="URL" alt="alternate text" width="width" height="height" /><

3. Lisää tyyliattribuutti div-tunnisteeseen:

   <div "><img src="URL" alt="alternate text" width="width" height="height"

4. Aseta div:n leveydeksi sama leveys kuin kuvan leveys käyttämällä width ominaisuutta:

   <div width:image width px;"><img src="URL" alt="alternate text" width="width" height="height"

5. Lisää tekstityksiä, jotka ovat hieman ympäröivää tekstiä pienempiä, div-tyyliin kirjasinkoon ominaisuus:

   <div width:image width px; font-size:80%;"><img src="URL" alt="alternate text" width="width" height="height"

6. Kuvatekstit näyttävät parhaiten keskeltä kuvan alapuolella, joten lisää tyyli-attribuutille tekstin tasausominaisuus:

   <div width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height"

7. Lisää lopuksi hieman ylimääräistä tilaa kuvan ja kuvatekstin väliin lisäämällä kuvaan tyyliattribuutti täyttötyyliominaisuuden avulla:

   <div width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" padding-bottom:0.5em;"

8. Lisää sitten kuvateksti suoraan kuvan alle:

   <div width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" padding-bottom:0.5em;" />This is my caption

Lataa verkkosivu palvelimellesi ja testaa sitä selaimessa.

Tekstitysvinkkejä

CSS-mittoja voi olla useita eri kokoja, joten sinun tulee yleensä sisällyttää mittaustyyppi. Esimerkiksi: HTML-kuvan mitat ovat aina pikseleinä, joten mittaus jätetään pois. Jos teet div-osan leveydestä kuvan leveyttä leveämmäksi, kuvateksti saattaa ilmestyä kuvan viereen. Jos haluat tämän, lisää yksi
-tunniste suoraan ennen kuvatekstiä ja kuvatunnisteen jälkeen.