CODEWITHSUNDEEP
htmlcss
Sandeep
Sandeep

Reputation: 49

How to position text in HTML

Hi HTML and CSS gurus, I am trying to prepare a website for myself and got stuck in aligning texts. Need some help on it.

I have attached 2 screenshots

Desktop View: [enter image description here]

Mobile View enter image description here

On Desktop View (Image 1)

  1. The blue colored background is a png image (made in photoshop) with a dimension of 400 x 603 px. 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") to be aligned in the middle of the blue background (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?

  2. I want the paragraph to have a 50 px gapping from both sides of the blue background. How to achieve it?

On Mobile View (Image 2)

  1. Whenever I try to resize my browser in mobile view and see the same paragraph it is shifting its base and going outside the blue box whereas it should be in the middle.

I have written the HTML and CSS code as:

HTML:

<div class="caption">
  <h3>Michael Corbett, who hosts NBC EXTRA&rsquo;s &lsquo;Mansions and Millionaires&rsquo; has observed:</h3>
</div>
<div class="img-cont fullh">
  <img src="img/background.png"/>
    <p id="text">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.</p>
</div>

CSS:

#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:1.5em;
    font-weight:regular;
    left:50px;
    top:50px;
    width:80%;
}

Am I missing something?

Upvotes: 2

Views: 16291

Answers (1)

kulbhushan charaya
kulbhushan charaya

Reputation: 119

I think You should add Position relative to your upper div for solve this problem. you are not showing your full html or css thats why I am not sure this is right or wrong.

.img-cont.fullh {
  max-width: 100%;
  position: relative;
}

Upvotes: 2

Related Questions