0

I have this CSS code:

.centered-and-cropped {
  object-fit: cover;
  border-radius:50%;
  width: 100px;
  height: 100px; 
}

And I have this html code:

<center>
<img class="centered-and-cropped"  src="image.jpg" alt="Bear1">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear2">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear3">
</center>

<center>
<img class="centered-and-cropped"  src="image.jpg" alt="Bear4">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear5">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear6">
</center>

Here is an image that shows how it looks like:

enter image description here

I would like to add caption under Each of the images like this:

enter image description here

How can I do that so each image has a caption right under that?

TJ1
  • 7,578
  • 19
  • 76
  • 119
  • Visit https://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image – character Jul 20 '17 at 05:03
  • Maybe helpful this article https://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image – character Jul 20 '17 at 05:04
  • Maybe helpful this article [How to Write a caption under an image?](https://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image) – character Jul 20 '17 at 05:07
  • Possible duplicate of [How to write a caption under an image?](https://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image) – RN92 Jul 20 '17 at 05:11

1 Answers1

1

You can use the figcaption tag

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

<center>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear1">
  <figcaption>Bear1.</figcaption>
 </figure>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear2">
  <figcaption>Bear2.</figcaption>
 </figure>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear3">
  <figcaption>Bear3.</figcaption>
 </figure>
</center>
derrysan7
  • 457
  • 1
  • 5
  • 15
  • Can you tell me how do I need to modify my css and html? Can you please show the complete answer? – TJ1 Jul 20 '17 at 05:05
  • 2
    Using the above code, You may need to use css - figure{display:inline-block;} to keep your images in line – shaina Jul 20 '17 at 05:09
  • Thank you, it works beautifully. as you said I needed to add figure{display:inline-block;} to keep your images in line. – TJ1 Jul 20 '17 at 05:20