Das 'top' CSS-Attribut gilt nicht für 100vh

Ich versuche, eine einfache, einseitige Website mit nur CSS als Übung zu erstellen, um mich mit CSS vertraut zu machen.Das 'top' CSS-Attribut gilt nicht für 100vh

Ich habe drei Hintergrundbilder übereinander gestapelt. Jedes Bild ist auf eine Höhe von 100vh eingestellt. Dies gibt jedem Bild ein schönes Aussehen, aber ich habe versucht, mit dem Attribut 'top' Text in der Mitte der Seite zu platzieren, der Text bewegte sich nicht.

Kann mir jemand sagen, warum 'top' in diesem Fall nicht funktioniert? Und ein Weg, um es zu umgehen?

This is my CSS: 

#page1 { 
    background-size: cover; 
    background-image: url('Page1_f09078_f06078_1000_vertical.png'); 
    height: 100vh; 
    display: block; 
} 

#welcome { 
    text-align: center; 
    top: 50%;    <-- This attribute won't work 
} 

#page2 { 
    background-size: cover; 
    display: block; 
    background-image: url('Page2_f06078_ffa860_1000_vertical.png'); 
    height: 100vh; 
} 

#page3 { 
    background-size: cover; 
    display: block; 
    background-image: url('Page3_ffa860_f09078_1000_vertical.png'); 
    height: 100vh; 
}

Das ist mein html:

<html lang="en"> 
    <head> 
    <link href="SinglePage.css" rel="stylesheet"> 
    </head> 
    <body> 

     <div id="page1"> 

     <h2 id="welcome">Welcome!</h2> 


     </div> <!-- End of page1 --> 

     <div id="page2"> 
     </div> 

     <div id="page3"> 
     </div> 



    </body> 
</html>

Quelle

2016-06-28 user6509972

'top',' links', 'rechts' und' bottom' Proprietäten funktioniert nur mit positionierten Elementen. – blonfu

top, left, right und bottom CSS-Eigenschaften funktionieren nur dann verwendet, wenn sie mit relative, absolute oder fixed Position.

Verwenden folgenden CSS:

#page1 { 
    position: relative; 
} 

#welcome { 
    transform: translateY(-50%); 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    right: 0; 
    left: 0; 
}

Quelle

2016-06-28 06:35:26

Position hinzufügen: relative;

#welcome { 
    position: relative; 
    text-align: center; 
    top: 50%; 
}

Quelle

2016-06-28 06:33:44

Der oben, rechts, unten und Eigenschaften, um die Position der positionierten Elemente angeben gelassen. Gehen Sie über diesen Link: https://developer.mozilla.org/en/docs/Web/CSS/position

Quelle

2016-06-28 06:50:10 Aby

Das 'top' CSS-Attribut gilt nicht für 100vh

Antwort

Verwandte Themen