Html 图像上长文本的对齐

我有一个图像和长文本，应该在图像上正确对齐。我给图像和文本指定了id，然后在CSS中，我使用绝对位置、顶部和左侧。一切都正常，但当我恢复浏览器时，文本不会停留在其原始位置。当我使用文本的其他位置时，文本不会出现在图像上

<img id="homeimg" src="images/1.jpg" alt="img" width="1280">


                    <p id="text">
                            In 2050, we are projected to have 9 billion on this planet. These people will eat and drink just like we do..
                        requiring a doubling of food production. But food and water security already are the largest challenges for a

                                           thriving global population...and long text

                        </p>

---

你需要有一个包含元素，一个div，比如说，你可以将图像设置为背景

<div class="container"> 
    <img src="" /> 
    <p class="text">the text</p> 
</div> 

.container { position relative; width:1280px; height:640px; background:url('image.jpg');background-size:cover;} 
.container .text {position:absolute;etc...}

文本
.container{相对位置；宽度：1280px；高度：640px；背景：url（'image.jpg'）；背景大小：cover；}
.container.text{position:absolute；etc.}

或者，如果需要具有内联图像，请使用position:relative的包含元素-其中任何绝对位置的元素都将相对于容器

<div class="container"> 
    <img src="" /> 
    <p>text...</p> 
</div> 

文本…

通过使用

位置：相对

文本将从其原始位置相对放置，因此不会粘在图像上。解决此问题的一个方法是将文本和图像放在一个容器中，将容器的位置设置为

位置：相对

，然后在图像上使用

位置：绝对

#容器{
位置：相对位置；
}
#正文{
位置：绝对位置；
文本对齐：居中；
宽度：45em；
单词包装：打断单词；
字体大小：25px；
左：150px；
顶部：200px；
字体系列：“投石机MS”；
z指数：100；
}
#回家{
宽度：100%
}

到2050年，我们预计地球上将有90亿人口。这些人会像我们一样吃喝。。
需要将粮食产量翻一番。但粮食和水安全已经是一个国家面临的最大挑战
欣欣向荣的全球人口……和长篇小说

请你摆弄一下我们能看到的图像好吗？图像是内联对象。如果要在图像上定位元素，它们必须具有

position:absolute

，W3school提供了一个很好的例子。您是否尝试过将图像用作#text元素的css背景图像？对我来说不起作用。由于容器的使用位置，一切都会受到干扰。

<div class="container"> 
    <img src="" /> 
    <p>text...</p> 
</div>