title: How to position text in HTML
body: <p>Hi <strong>HTML</strong> and <strong>CSS</strong> gurus, I am trying to prepare a website for myself and got stuck in aligning texts. Need some help on it.</p>
  
  <p>I have attached 2 screenshots</p>
  
  <p>Desktop View:
  [<img src="https://i.stack.imgur.com/G0VC9.png" alt="enter image description here">]</p>
  
  <p>Mobile View
  <a href="https://i.stack.imgur.com/bJ64H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bJ64H.png" alt="enter image description here"></a></p>
  
  <p><strong>On Desktop View (Image 1)</strong></p>
  
  <ol>
  <li><p>The blue colored background is a <strong>png image</strong> (made in photoshop) with a dimension of <strong>400 x 603 px</strong>. The black color background on the left or the red color background on the up are coded in HTML. I want the whole paragraph ("Many unit rent....gone by then") <strong>to be aligned in the middle of the blue background</strong> (from top where it is at present). How to code it dynamically so that whatever the screen size is the text remains in the middle? </p></li>
  <li><p>I want the paragraph to have a <strong>50 px gapping</strong> from both sides of the blue background. How to achieve it?</p></li>
  </ol>
  
  <p><strong>On Mobile View (Image 2)</strong></p>
  
  <ol start="3">
  <li>Whenever I try to resize my browser in <strong>mobile view</strong> and see the same paragraph it is shifting its base and going outside the blue box whereas it <strong>should be in the middle</strong>.</li>
  </ol>
  
  <p>I have written the <strong>HTML</strong> and <strong>CSS</strong> code as:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="caption"&gt;
    &lt;h3&gt;Michael Corbett, who hosts NBC EXTRA&amp;rsquo;s &amp;lsquo;Mansions and Millionaires&amp;rsquo; has observed:&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="img-cont fullh"&gt;
    &lt;img src="img/background.png"/&gt;
      &lt;p id="text"&gt;Many units rent immediately, so it's kind of foolish to wait till the weekend just to get a peek; Chances are, it will be gone by then.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#text
  {
      z-index:100;
      position:absolute;    
      color:white;
      font-size:1.5em;
      font-weight:regular;
      left:50px;
      top:50px;
      width:80%;
  }
  </code></pre>
  
  <p>Am I missing something?</p>