Question

我希望“Hello World”文字正好出现在网站上的图片下方。

<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

Answer 2

在这里做了一个小提琴。

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

text-align:center;

https://jsfiddle.net/7g0horha/

Answer 3

无需使用绝对定位<p>标记。使用margin-top: -50px风格来满足您的需求。

你走了：

Center aligned text

将以下代码放在<p>

上

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

Answer 4

实际上根本不需要使用定位。试想一下它就是一张桌子。

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>

使文本显示在中心图像下方

4 个答案: