在CSS中裁剪为圆圈的图像下添加标题

Question

我有这个CSS代码：

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

我有这个HTML代码：

<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>

这是一张图片，展示了它的样子：

我想在每个图像下添加标题：

我该怎么做才能让每张图片都有一个标题？

Answer 1

您可以使用figcaption标签

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>