Выравнивание длинного текста на изображении

Question

У меня есть изображение и длинный текст, который должен быть правильно выровнен на изображении. Я дал id для изображения и текста, затем в CSS для текста. Я использую position-absolute, top и left. Все было правильно, но когда я восстанавливаю браузер, текст не остается в исходном положении. Когда я использовал другие позиции для текста, он не появляется на изображении.

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

Или, если вам нужно иметь встроенный файл, используйте содержащий элемент с позицией: относительной - любые абсолютные позиционируемые элементы внутри будут относительно контейнера.

<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

Поступая таким образом, текст будет позиция абсолютно, но относительно из контейнера.