html - 如何在居中图像下方添加文本

Question

在此question有一个great solution关于如何将居中图像添加到页面。

• Pure CSS solution
• Not breaking the document flow (no floats or absolute positioning)
• Cross browser compatibility (even IE6)
• Completely responsive.
• vertically centered

解决方案http://jsfiddle.net/avrahamcool/d89xh/

* {
  padding: 0;
  margin: 0;
}
#over {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
.Centerer {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.Centered {
  display: inline-block;
  vertical-align: middle;
}

<div id="over">
  <span class="Centerer"></span>
  <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

但是如何修改该解决方案以在居中图像下方添加额外的文本，以便它也始终居中。

有什么想法吗？

Answer 1

您可以使用 <figure>和 <figcaption> :

<figure>
  <img />
  <figcaption>Image</figcaption>
</figure>

并给出父元素，text-align: center; .

片段

.center {text-align: center;}

<div class="center">
  <figure>
    <img src="http://placehold.it/250?text=IMG" alt="">
    <figcaption>Hello</figcaption>
  </figure>
</div>

预览:

fiddle :http://jsfiddle.net/0p53fxgk/

预览:

跨浏览器检查

• Internet Explorer 9
• IE 边缘
• 火狐
• Chrome
• 歌剧

对于9以下的IE，可以使用:

figure, figcaption {display: block;}