1. ホーム
  2. 質問と答え
  3. 'top' CSS属性は100vhには適用されません

'top' CSS属性は100vhには適用されません

2016-06-28 12 views
1

私はcssだけを使ってシンプルな単一ページのWebサイトを構築して、CSSに慣れさせようとしています。'top' CSS属性は100vhには適用されません

私は3つの背景画像を重ね合わせています。各画像は100vhの高さに設定されています。これは、それぞれの画像にすばらしい外観を与えますが、テキストをページ中央に配置するために 'top'属性を使用しようとしましたが、テキストは移動しませんでした。

誰かがこの状況で「トップ」がうまくいかない理由を教えてもらえますか？それを回避する方法は？

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

これは私の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>

出典

2016-06-28 user6509972

+2

'top'、' left'、 'right'と' bottom'の部分は、配置された要素でのみ動作します。 – blonfu

答えて

2

top、left、rightとbottom CSS特性がrelative、absolute又はfixed位置と使用する場合にのみ動作します。 CSS以下

使用：

#page1 { 
    position: relative; 
} 

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

出典

2016-06-28 06:35:26

0

はポジション追加：相対;

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

出典

2016-06-28 06:33:44

関連する問題

 関連する問題