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

Question

我希望在网站上，图片正下方精确地出现“Hello World”文本。请参考此链接。

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

- user379888

---

为什么将img设置为absolute并拉伸到整个屏幕？无论如何，如果你只是从div元素中移除position: relative，你会得到图像下方的文本。 - Kamran Ahmed

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演示

- Paulie_D

Answer 2

在这里创建了一个小例子。

你只需要使用CSS来居中元素。

text-align:center;

https://jsfiddle.net/7g0horha/

- Jay

Answer 3

实际上根本不需要使用定位。只需将其视为表格。

html {
  height: 100%;
}

body {
  display: table;
  margin:0;
  padding:0;
  background-color:#FEEDDA;
  height: inherit;
  width: 100%;
}

div {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: inherit;
}

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

- DavidDomain

Answer 4

没有必要使用绝对定位的<p>标签。根据您的需要调整margin-top: -50px样式。

这里是：

居中对齐的文本

将以下代码放在您的<p>标签上

p{
  text-align: center;
  margin-top: -50px;
}

- James111