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

在 CSS 中裁剪成圆圈的图像下方添加说明

Adding caption under images that have been cropped to circle in CSS

html

css

geometry

caption