Warum ist meine Textposition auf das Ansichtsfenster ausgerichtet?

Question

Ich versuche, y-Text an einem Projekt auszurichten, aber wenn ich dies tue, wird der Text an das Ansichtsfenster ausgerichtet. Wenn ich versuche, den Text auszurichten, bewegt sich der Text vertikal mit dem Ansichtsfenster.

header { 
 
    height: 900px; 
 
    background-image: url('../img/large-banner-image.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center top; 
 
} 
 

 
span { 
 
    font: 60px Pacifico, sans-serif; 
 
    font-weight: 400; 
 
} 
 

 
.Header-Type { 
 
    vertical-align: -16px 
 
} 
 

 
img { 
 
    display: inline-block; 
 
    margin: 17px; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 62px; 
 
    right: 13px; 
 
} 
 

 
h2 { 
 
    font: 22px Raleway, sans-serif; 
 
    font-weight: 700; 
 
} 
 

 
p { 
 
    font: 36px Raleway, sans-serif; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    position: relative; 
 
    top: 90px; 
 
} 
 

 
.Phone { 
 
    text-align: center; 
 
    position: relative; 
 
    top: -567px; 
 
} 
 

 
.Down-Arrow { 
 
    text-align: center; 
 
    position: relative; 
 
    top: -574px; 
 
} 
 

 
<.content-alt { 
 
    float: left; 
 
    margin: -600px 1800px 
 
} 
 

 
> .content-alt2 { 
 
    display: none 
 
} 
 

 
.content { 
 
    display: none 
 
} 
 

 
.content2 { 
 
    display: none 
 
} 
 

 
.alternate { 
 
    display: none 
 
} 
 

 
.other { 
 
    text-align: center; 
 
} 
 

 
.near-bottom { 
 
    text-align: center; 
 
} 
 

 
footer { 
 
    word-spacing: 30px; 
 
} 
 

 
.footer { 
 
    font: 16px HelveticaNeue, sans-serif; 
 
    font-weight: 400; 
 
} 
 

 
.Image { 
 
    text-align: center; 
 
}

<header> 
 
    <h1> <img style="vertical-align:middle" src="img/focus.png"/><span>Focus</span></h1> 
 
    <p>A landing page for your app with focus</p> 
 
</header> 
 

 
<div class="Phone"> 
 
    <img src="img/iphone.png" /> 
 
</div> 
 

 
<div class="content-alt"> 
 
    <h2>Great Feature</h2> 
 
    <div>Lorem ipsum dolor sit amet, consectetur 
 
     <br> adipiscing elit. Mauris interdum velit vitae 
 
     <br> nulla molestie eu. </div> 
 
</div> 
 

 
<div class="content"> 
 
    <h2>Great Feature</h2> 
 
    <div>Lorem ipsum dolor sit amet, consectetur 
 
     <br> adipiscing elit. Mauris interdum velit vitae 
 
     <br> nulla molestie eu. </div> 
 
</div> 
 

 
<div class="content-alt"> 
 
    <h2>Another Great Feature</h2> 
 
    <div>Lorem ipsum dolor sit amet, consectetur 
 
     <br> adipiscing elit. Mauris interdum velit vitae 
 
     <br> nulla molestie eu. </div> 
 
</div> 
 

 
<div class="content"> 
 
    <h2>Another Great Feature</h2> 
 
    <div>Lorem ipsum dolor sit amet, consectetur 
 
     <br> adipiscing elit. Mauris interdum velit vitae 
 
     <br> nulla molestie eu. </div> 
 
</div> 
 

 
<div class="alternate"> 
 
    <h2>Get The App Today!</h2> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id 
 
     sollicitudin ante lobortis at.</div> 
 
</div> 
 

 
<div class="other"> 
 
    <h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3> 
 
    <div>Kyle Turner, Blogger</div> 
 
</div> 
 

 
<div class="Image"> 
 
    <img src="img/people.png" /> 
 
</div> 
 

 
<div class="near-bottom"> 
 
    <h4>Say Hi & Get in Touch</h4> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div> 
 
</div> 
 

 
<footer> 
 
    <p>Contact Download Press Email Support</p> 
 
</footer>

Jede Fehlerbehebung würde geschätzt.

Answer 1

Das liegt daran, dass Sie das Absatzelement auf position: relative festgelegt haben. In diesem Fall relativ zum Ansichtsfenster. Werd das Los. Sie sollten keine relative Positionierung verwenden, es sei denn, Sie sind absolut erforderlich.

Answer 2

Wenn Sie versuchen, den Text auf "vertical-align: middle" zu setzen, sollten Sie ihm die Anzeigeeigenschaft "display: table-cell" und sein Elternelement die Anzeigeeigenschaft "display: inline-table" geben . Auf diese Weise funktioniert Ihre Eigenschaft zum vertikalen Ausrichten ohne Probleme.

Answer 3

Hier ist ein Arbeitsbeispiel mit schwebenden Elementen für die Reaktionszeit auf der Seite, hoffe das hilft!

header{ 
    height:250px; 
    background-image:url('../img/large-banner-image.png'); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 


span { 
    font: 60px Pacifico, sans-serif; 
    font-weight: 400; 
} 

.Header-Type{ 
    vertical-align: -16px 
} 

img { 
    display: inline-block; 
    margin: 17px; 
} 

h1 { 
    text-align: center; 
    margin-top:60px; 
} 

h2 { 
    font: 22px Raleway, sans-serif; 
    font-weight: 700; 
} 

p { 
    font: 36px Raleway, sans-serif; 
    font-weight: 300; 
    text-align: center; 
} 

.content-alt { 
    text-align:left; 
    float:left; 
    width:20%; 
    margin-left:20%; 
} 

.content-alt2 { 
    text-align:left; 
    float:left; 
    width:20%; 
    margin-left:20%; 
    margin-top:60px; 
} 

.content-alt2::before{ 
    clear:both; 
} 

.content { 
    text-align:left; 
    float:left; 
    width:20%; 
    margin-left:20%; 
} 

.content2 { 
    text-align:left; 
    float:left; 
    width:20%; 
    margin-left:20%; 
    margin-top:60px; 
}