css - 使文本出现在中心图像下方

Question

我希望“Hello World”文本恰好显示在网站上图片的下方。

Fiddle .

<div><img src="http://i.imgur.com/W8lz0xc.png?1">
<p>Hello World</p>
</div>

Answer 1

定位整个事物而不仅仅是图像

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #FEEDDA;
  ;
}
.wrap {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrap">
  <img src="http://i.imgur.com/W8lz0xc.png?1" />
  <p>Hello World</p>
</div>

JSfiddle Demo