Question

我试图在页面中间的图像上放置一些文字。

我看到了这样一个例子：

<img src="image.png" style="z-index: -1;" />
<p style="position: absolute; top: 1px; left: 1px;>text</p>

但是当我试图将它居中时，文字将不在中心。

<div>
    <center>
         <img src="image.png" style="z-index: -1;" />
         <p style="position: absolute; top: 1px; left: 1px;>text</p>
    </center>
</div>

如何在没有绝对位置的情况下在图像上创建文本？

Answer 1

问题不在于绝对定位，而在于你如何使文本居中。段落中的文本将居中，但由于段落与文本具有相同的宽度，因此无效。当你使段落绝对定位时，它不再从其父级获得宽度。

您可以使父级的宽度与图像相同，并且段落的长度与父级相同，然后将文本居中放在段落中。例如：

HTML：

<div>
    <img src="http://placekitten.com/300/200">
    <p>text</p>
</div>

CSS：

div {
  position: relative;
  width: 300px;
}
p {
  position: absolute;
  left: 0; bottom: 20px;
  width: 100%;
  text-align: center; color: #fff;
}

演示：http://jsfiddle.net/crp6V/

注意：父元素上的position: relative;使其成为段落绝对位置的原点。

如果您想将图像和文本都居中，那么您只需使段落与父级的宽度相同：http://jsfiddle.net/crp6V/2/

Answer 2

你能做什么，是当然设置图像为段落背景。

如果您知道段落的确切大小以及是否已定义：

p.overlay {
    display:block;
    position:relative;
    height:40px;
    margin-top:-40px;
}

保留z-index等之前，例如，这可能有用。另一件事是因为p绝对定位不会居中，但如果父亲是相对的并且图像具有父级的全宽，则可以使段落显示为块，100％宽度，然后以文本为中心。

   p.overlay {
        display:block;
        position:absolute;
        width:100%;
        text-align:center
    }

所以绝对位置仍然有效

没有绝对位置的图像上的文字

2 个答案: