Question

所以我的问题是我试图将文本保留在页面的中心（稍微一点）。问题1：调整页面大小时，无序列表会上下移动。我希望它留在一个位置（在山顶上）。它看起来像这样：http://gyazo.com/8c7dc29c17dab86186cf4bfde4eb1a18

它应该如下所示：http://gyazo.com/644b3c072e7befffaf08d412a894bbb3 因此，例如，当页面非常大时，它会显示无序列表方式太低，但是当页面太高时，它会在顶部显示无序列表。我希望它留在中间位置，在这里：http://gyazo.com/c4c70bf8b640c6c0c1848a7085be07cf 这是我的目标。

HTML：

<html>
<link rel="stylesheet" type="text/css" href="../Web_v2/css/Style.css">
<head><title>Company</title></head>
<body>
<nav>
<ul>
<li>about us</li>
<li>Who we are</li>
<li>Contact us</li>


</ul>

</nav>

</body>

    <div id="bg">
<img src="../Web_v2/Assets/bg.jpg">
</div>
</html>

CSS：

  #bg{
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}
#bg img{
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}
nav ul{
    list-style: none;
}
nav{
    z-index: 1;
    position: relative;
    text-align: center;
    margin-top: 400px;
    margin-left: 600px;
    font-size: 40px;
    color: white;
    font-weight: 20;

}

的jsfiddle：http://jsfiddle.net/5wdvk9k0/

Answer 1

这是一个非常复杂的问题，使用jQuery比使用CSS更好，但是在这里你有一个解决方案：

首先，在您的HTML中，简化这样的事情：

<nav>
    <ul>
        <li>about us</li>
        <li>filmography</li>
        <li>Contact us</li>
    </ul>
</nav>

您不需要#bg div，我们会定位body

现在，通过更清晰的标记，我们将在CSS中使用viweport sizes，如下所示：

body {
    background:url('http://cydronixfilms.com/css/images/bg.jpg') no-repeat 50%;
    background-size:cover;
    width:100vw;
    height:100vh;
}

nav ul {
    list-style: none;
    margin-top:20vh
}
nav {
    font-family:"open sans";
    text-align: center;
    font-size: 6vh;
    color: #FFF;
    padding-top: 15vh;
    height: 20vh;
}

所以我们在这里做的是让nav元素调整到视口大小，自动调整字体，并始终保持位置。这称为CSS Device Adaptation。您可以使用this fiddle进行游戏，以便了解它是如何工作的，并且您可能需要调整一些数字，但是您可以使用纯CSS来实现此目的

Answer 2

您的导航应该居中，方法是将其设置为右侧自动边距和边距左侧的块

nav{
    display: block;
    margin: 400px auto 0px auto;
}

Answer 3

请尝试改为：

*{margin:0;}
html, body{ height:100%; }
nav ul {list-style: none;}

#bg, nav{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0; 
}

#bg {
  width:100%;
  height:100%;
  background: url(http://cydronixfilms.com/css/images/bg.jpg) 50% / cover;
}

nav {
  width: 300px;
  height: 150px;    /* fallback for unsupported vh */
  height: 20vh;     /* CHANGE THIS ONE TO FIX VERTICAL POSITION */
  
  font-family:"open sans", Helvetica, Arial, sans-serif;
  margin: auto;
  text-align: center;
  font-size: 45px;
  font-size: 5vh;
  color: white;
}

<div id="bg"></div>
  
  
<nav>
    <ul>
        <li>about us</li>
        <li>filmography</li>
        <li>Contact us</li>
    </ul>
</nav>

使用完整的背景图片和一些vh（viewportHeight）单位计算，您可以获得非常棒的结果。

如何使无序列表保持在一个位置，即使页面太小，调整大小

3 个答案: