没有绝对位置的图像上的文本答案

【问题标题】：Text over image without absolute position没有绝对位置的图像上的文本
【发布时间】：2022-02-12 03:19:34
【问题描述】：

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

我看到一个这样的例子：

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

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

【问题讨论】：

不使用绝对定位和相对定位，您需要将图像设置为包含 div 的背景。
或负边距ben
@omri 这个图像是装饰还是对您的内容至关重要？
请不要使用<center>。它很久以前就被弃用了。

标签： html css

【解决方案1】：

问题不在于绝对定位，而在于您如何使文本居中。段落中的文本将居中，但这不起作用，因为段落与文本的宽度相同。当您使段落绝对定位时，它不再从其父级获取其宽度。

您可以使父级与图像的宽度相同，段落与父级的宽度相同，然后在段落内居中放置文本。示例：

div {
  position: relative;
  width: 300px;
}

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

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

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

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

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

【讨论】：

非常令人印象深刻的先生，您是对的！你可能赢得了这场战斗，但我会赢得这场战争；]

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

所以绝对位置仍然可以工作

【讨论】：