html - 响应式头像中的 figcaption 问题

Question

我尝试在网站的主页上使用响应式头像，除了在桌面视图和媒体查询中都出现问题的 figcaption 之外，一切都运行良好。

我应该修改的任何建议或解决方法。

.breakpoint { /* One column for smartphones */
  max-width: 33%;
  display: inline-block;
  margin: 4px;
}

.breakpoint figcaption {
  text-align: center;
  padding-top: 5px;
  font-style: italic;
  font-size: 8px;
  text-indent: 0;  
}

<section id="responsive-images-breakpoints">
  <a href="public_transport/index.htm">
    <img class="breakpoint avatar" src="images/airport-kix/airport-bus.jpg" alt="Public Transport">
    <figcaption>Public Transport</figcaption>
  </a>

Answer 1

figcaption 元素应该嵌入在 figure 元素中。

例子：

<figure>
    <img src="" alt="">
    <figcaption></figcaption>
</figure>