Wie Sie Text in HTML positionieren

Question

Hallo HTML und CSS Gurus, ich versuche, eine Website für mich vorzubereiten und steckte in der Ausrichtung von Texten fest. Brauchen Sie Hilfe.

Ich habe 2 Screenshots beigefügt

Desktop-Ansicht: []

Mobile Ansicht

Auf Desktop-Ansicht (Bild 1)

1. Der blaue farbiger Hintergrund ist ein png bild (in photoshop hergestellt) mit einer dimension von 400 x 603 px. Der schwarze Hintergrund auf der linken Seite oder der rote Hintergrund auf der Oberseite sind in HTML kodiert. Ich möchte den ganzen Absatz ("Viele Einheit mieten .... bis dahin gegangen") in der Mitte des blauen Hintergrunds ausgerichtet werden (von oben, wo es derzeit ist). Wie man es dynamisch kodiert, so dass der Text unabhängig von der Bildschirmgröße in der Mitte bleibt?

2. Ich möchte der Absatz eine 50 px Lücken von beiden Seiten des blauen Hintergrund haben. Wie erreiche ich das?

On Mobile Ansicht (Bild 2)

3. Jedes Mal, wenn ich versuche, meinen Browser in mobilen Ansicht, um die Größe und den gleichen Absatz sieht es seine verlagert Basis und außerhalb der blauen Box, während es in der Mitte sein sollte.

Ich habe die HTML geschrieben und CSS Code wie:

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%; 
} 

Fehle ich etwas?

Answer 1

Ich denke, Sie sollten Position relativ zu Ihrem oberen div hinzufügen, um dieses Problem zu lösen. Sie zeigen nicht Ihren vollen HTML oder CSS, deshalb bin ich nicht sicher, dass das richtig oder falsch ist.

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