How to write a caption under an image?

后端 未结 9 1611
心在旅途
心在旅途 2020-11-29 19:55

I have two images that need to kept inline; I want to write a caption under each image.

相关标签:
9条回答
  • 2020-11-29 20:51

    The <figcaption> tag in HTML5 allows you to enter text to your image for example:

    <figcaption>
    Your text here
    </figcaption>.
    

    You can then use CSS to position the text where it should be on the image.

    0 讨论(0)
  • 2020-11-29 20:51
    <table>
    <tr><td><img ...><td><img ...>
    <tr><td>caption1<td>caption2
    </table>
    

    Style as desired.

    0 讨论(0)
  • 2020-11-29 20:52

    Put the image — let's say it's width is 140px — inside of a link:

    <a><img src='image link' style='width: 140px'></a>
    

    Next, put the caption in a and give it a width less than your image, while centering it:

    <a>
      <img src='image link' style='width: 140px'>
      <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
    </a>
    

    Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.

    <a style='text-decoration: none; color: orange;'>
      <img src='image link' style='width: 140px'>
      <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
    </a>
    

    I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html

    0 讨论(0)
提交回复
热议问题