圖像上的長文本對齊

Question

我有一張圖片和長文字，應該在圖片上正確對齊。 我給圖像和文本提供了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>

CSS編碼是

#text {
    position: relative;
    text-align: center;
    width: 45em;
    word-wrap: break-word;
    font-size: 25px;
    left: 150px;
    top: 600px;
    font-family: "Trebuchet MS";
    z-index: 100;
}
#homeimg{
    width:100%
}

Answer 1

您需要有一個包含元素，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...}

或者，如果您需要內聯圖像，請使用具有position：relative的包含元素-內部的任何絕對定位的元素都將相對於容器。

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

Answer 2

通過使用position:relative ，文本將相對於其原始位置相對放置，因此不會粘在圖像上。 解決問題的一種方法是將文本和圖像放在容器中，將容器的位置設置為position:relative ，然后在圖像上使用position:absolute 。

 #container{ position:relative; } #text { position: absolute; text-align: center; width: 45em; word-wrap: break-word; font-size: 25px; left: 150px; top: 200px; font-family: "Trebuchet MS"; z-index: 100; } #homeimg{ width:100% } 

 <div id=container> <img id="homeimg" src="http://placehold.it/1280x1000" alt="img"> <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> 

jsfiddle

這樣，文本將絕對但相對於容器定位。