How to write a caption under an image

Question

I have two images that need to kept inline  I want to write a caption under each image    lt center gt      lt a href  http   example com hello  gt          lt img src  hello png  width  100px  height  100px  gt      lt  a gt      amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp       lt a href  http   example com hi  gt          lt img src  hi png  width  100px  height  100px  gt      lt  a gt   lt  center gt    How can I implement

User · Answer

The  lt figcaption gt  tag in HTML5 allows you to enter text to your image for example    lt figcaption gt  Your text here  lt  figcaption gt     You can then use CSS to position the text where it should be on the image

User · Answer

Put the image     let s say it s width is 140px     inside of a link    lt a gt  lt img src  image link  style  width  140px  gt  lt  a gt    Next  put the caption in a  and give it a width less than your image  while centering it    lt a gt     lt img src  image link  style  width  140px  gt     lt div style  width  130px  text-align  center   gt I just love to visit this most beautiful place in all the world  lt  div gt   lt  a gt    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    lt a style  text-decoration  none  color  orange   gt     lt img src  image link  style  width  140px  gt     lt div style  width  130px  text-align  center   gt I just love to visit this most beautiful place in all the world  lt  div gt   lt  a gt    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

User · Answer

lt div style  margin  0 auto  text-align  center  overflow  hidden   gt     lt div style  float  left   gt       lt a href  http   xyz com hello  gt  lt img src  hello png  width  100px  height  100px  gt  lt  a gt      caption 1    lt  div gt    lt div style  float  left   gt      lt a href  http   xyz com hi  gt  lt img src  hi png  width  100px  height  100px  gt  lt  a gt     caption 2                         lt  div gt   lt  div gt

User · Answer

CSS is your friend  there is no need for the center tag  not to mention it is quite depreciated  nor the excessive non-breaking spaces  Here is a simple example   CSS   images       text-align center     images img       width 100px      height 100px     images div       width 100px      text-align center     images div span       display block     margin right       margin-right 50px     float       float left     clear       clear both      height 0      width 0      HTML   lt div class  images  gt       lt div class  float margin right  gt           lt a href  http   xyz com hello  gt  lt img src  hello png  width  100px  height  100px    gt  lt  a gt           lt span gt This is some text lt  span gt       lt  div gt       lt div class  float  gt           lt a href  http   xyz com hi  gt  lt img src  hi png  width  100px  height  100px    gt  lt  a gt           lt span gt And some more text lt  span gt       lt  div gt       lt span class  clear  gt  lt  span gt   lt  div gt

User · Answer

To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this   HTML   lt div class  items  gt   lt figure gt       lt img src  hello png  width  100px  height  100px  gt       lt figcaption gt Caption 1 lt  figcaption gt   lt  figure gt   lt figure gt       lt img src  hi png  width  100px  height  100px  gt        lt figcaption gt Caption 2 lt  figcaption gt   lt  figure gt  lt  div gt    CSS   items  text-align center  margin 50px auto      items figure  margin 0px 20px  display inline-block  text-decoration none  color black     https   jsfiddle net c7borg jLzc6h72 3

User · Answer

For responsive images  You can add the picture and source tags within the figure tag    lt figure gt     lt picture gt       lt source media   min-width  750px   srcset  images image 2x jpg   gt       lt source media   min-width  500px   srcset  images image jpg    gt       lt img src  images jpg  alt  An image  gt     lt  picture gt     lt figcaption gt Caption goes here lt  figcaption gt   lt  figure gt

User · Answer

Figure and Figcaption tags    lt figure gt       lt img src  image jpg  alt  missing    gt       lt figcaption gt Caption goes here lt  figcaption gt   lt  figure gt    Gotta love HTML5     See sample   x000D   x000D   container   x000D      text-align  center  x000D    x000D  a  figure   x000D      display  inline-block  x000D    x000D  figcaption   x000D      margin  10px 0 0 0  x000D      font-variant  small-caps  x000D      font-family  Arial  x000D      font-weight  bold  x000D      color   bb3333  x000D    x000D  figure   x000D      padding  5px  x000D    x000D  img hover   x000D      transform  scale 1 1   x000D      -ms-transform  scale 1 1   x000D      -webkit-transform  scale 1 1   x000D      -moz-transform  scale 1 1   x000D      -o-transform  scale 1 1   x000D    x000D  img   x000D      transition  transform 0 2s  x000D      -webkit-transition  -webkit-transform 0 2s  x000D      -moz-transition  -moz-transform 0 2s  x000D      -o-transition  -o-transform 0 2s  x000D    x000D   lt div id  container  gt  x000D       lt a href     gt  x000D           lt figure gt  x000D               lt img src  http   lorempixel com 100 100 nature 1   width  100px  height  100px    gt  x000D               lt figcaption gt First image lt  figcaption gt  x000D           lt  figure gt  x000D       lt  a gt  x000D       lt a href     gt  x000D           lt figure gt  x000D                lt img src  http   lorempixel com 100 100 nature 2   width  100px  height  100px    gt  x000D               lt figcaption gt Second image lt  figcaption gt  x000D           lt  figure gt  x000D       lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt table gt   lt tr gt  lt td gt  lt img     gt  lt td gt  lt img     gt   lt tr gt  lt td gt caption1 lt td gt caption2  lt  table gt    Style as desired

User · Answer

CSS   images      text-align center      margin 50px auto      images a      margin 0px 20px      display inline-block      text-decoration none      color black       HTML   lt div id  images  gt       lt a href  http   xyz com hello  gt           lt img src  hello png  width  100px  height  100px  gt           lt div class  caption  gt Caption 1 lt  div gt       lt  a gt       lt a href  http   xyz com hi  gt           lt img src  hi png  width  100px  height  100px  gt            lt div class  caption  gt Caption 2 lt  div gt       lt  a gt   lt  div gt      A fiddle is here

[css] How to write a caption under an image?

Examples related to css

Examples related to html