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

Question

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

  

  
• 纯CSS解决方案
  
• 不破坏文件流程（没有浮动或绝对定位）
  
• 跨浏览器兼容性（甚至是IE6）
  
• 完全响应。
  
• 垂直居中
  

解决方案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

您可以使用yi和<figure>：

<figcaption>

并提供父元素<figure> <img /> <figcaption>Image</figcaption> </figure> 。

<强>段

＆＃13;

＆＃13;

text-align: center;

＆＃13;

.center {text-align: center;}

＆＃13;

＆＃13;

＆＃13;

预览

小提琴：http://jsfiddle.net/0p53fxgk/

预览

跨浏览器检查

• Internet Explorer 9
• IE Edge
• 火狐
• 铬
• 戏

对于低于9的IE，您可以使用：

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