图<figcaption>不起作用

Question

我想使用HTML5 figcaption标记来对齐图片下的一些文字：

.imagesize {
    height: 300px;
    width: 400px;
}

<figure>
 <img src = "http://i67.tinypic.com/vf8tcn.jpg" class="imagesize img-responsive center-block"/>
<figcaption>Linus Torvalds, the creator of Linux and Git</figcaption>
</figure>

这是我项目中的 codepen link，您可以在其中看到完整的来源。

Answer 1

如果您希望它居中，这是一种方法，添加此规则

figcaption {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

示例代码段

.imagesize {
    height: 300px;
    width: 400px;
}
figcaption {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

<figure>
 <img src = "http://i67.tinypic.com/vf8tcn.jpg" class="imagesize img-responsive center-block"/>
<figcaption>Linus Torvalds, the creator of Linux and Git</figcaption>
</figure>

这是另一个

figcaption {
  display: block;
  text-align: center;
}

示例代码段

.imagesize {
    height: 300px;
    width: 400px;
}
figcaption {
  display: block;
  text-align: center;
}

<figure>
 <img src = "http://i67.tinypic.com/vf8tcn.jpg" class="imagesize img-responsive center-block"/>
<figcaption>Linus Torvalds, the creator of Linux and Git</figcaption>
</figure>