Question

我正在尝试构建一个简单的单页网站，只使用css作为练习来熟悉css。

我有三个背景图像堆叠在一起。每个图像设置为100vh的高度。这给每个图像一个漂亮的外观，但我尝试使用＆＃39; top＆＃39;属性将文本放在页面中间，文本没有移动。

有人可以告诉我为什么＆＃39; top＆＃39;在这种情况下不起作用？还有一种解决方法吗？

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>

Answer 1

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

Answer 2

添加职位：亲属;

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

Answer 3

top，right，bottom和left属性指定定位元素的位置。点击此链接：https://developer.mozilla.org/en/docs/Web/CSS/position

＆＃39; top＆＃39; CSS属性不适用于100vh

3 个答案: