Question

所以我的问题在于我希望我的文本显示在页面的死角中。我一直试图手动对齐它，但这似乎是一种糟糕的做法。我想要它，以便即使网页调整为较小或用户使用较小的屏幕，无序列表将显示在屏幕的死点。到目前为止，我所尝试的并不是随着背景而移动，并且对齐得很差。 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;

}

编辑：感谢所有有用的答案，但我仍有问题。

问题1：调整页面大小时，文本会上下移动。我希望它坐在山顶：http://gyazo.com/8c7dc29c17dab86186cf4bfde4eb1a18 - 它应该如下所示：http://gyazo.com/644b3c072e7befffaf08d412a894bbb3

Answer 1

您可以将a包装并将CSS规则设置为居中文本。

例如：

<div id="centerme">
    <nav>
        <ul>
          <li>about us</li>
          <li>Who we are</li>
          <li>Contact us</li>   
        </ul> 
    </nav>
</div>

CSS:

#centerme {
    text-align: center;
}

Answer 2

我不确定你是否想要水平居中，但如果是这样，你可以看看我在这里做了什么（包括随机背景图片！）：http://jsfiddle.net/2o2a3a6t/1/

<body>
    <nav>
        <ul>
            <li>About Us</li>
            <li>Who We Are</li>
            <li>Contact Us</li>
        </ul>
    </nav>
</body>


html{
    background: url('http://bit.ly/1Efu4Mc') no-repeat center center;
    height: 100%;
}
nav {
    text-align: center;
    font-size: 40px;
    color: #000;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

Answer 3

这是一个非常简单的代码，用于将无序列表集中在整个页面中。

为nav标签添加样式，如下所示：

nav{
   float:left;
   width:100%;
   text-align:center;
   display:table-cell;
}

将样式赋予ul标签，如下所示：

ul{
   float:none;
   margin:35% auto auto;
   width:200px;
   list-style:none;
   text-align:center;
}

在页面中心对齐无序列表[新问题]

3 个答案: