Question

我遇到的问题是，无论我尝试什么，我都无法将导航栏放在中心位置。我是HTML / CSS世界的新手，无法解决这个问题。如果你可以看一看，看看你是否能想到如何集中他们，我们将不胜感激！

以下是问题的图片：

我的HTML代码的一部分：

    <title>Neon Angels</title>
</head>

<body class="fix">
    <div id="wrapper">

         <div class="section black" id="section1">
              <h2 id="welcome">The Neon Angels Welcome You!
                  <img src="wingslogo.svg" alt="" id="top">
                  <img src="wingslogo.svg" alt="" id="top2">
             </h2>
             <p>
                  <img src="wings.jpg" alt="wings" width="750" id="wings">
             </p>

             <ul class="nav">
                  <li><a href="#section2" style="text-decoration:none">About Us</a></li>
                  <li><a href="#section3" style="text-decoration:none">Painting with Light</a></li>
                  <li><a href="#section4" style="text-decoration:none">Portraits</a></li>
                  <li><a href="#section5" style="text-decoration:none">Nature</a></li>
                  <li><a href="#section6" style="text-decoration:none">Contact Us</a></li>
             </ul>

            <div class="mouse">
                <div class="mouse-icon">
                   <span class="mouse-wheel"></span>
                </div>
           </div>
       </div>
    </div>
</body>
</html>

CSS代码：

.nav{
    padding-left: 250px;
    padding-right: 250px;
    margin-left: 500px;
    width: 1000px;
    list-style: none;
}

.black ul li{
    display:inline;
    color:#aaa;
    float:left;
}
.black ul li a{
    padding:0px 10px; 
    color:#f0f0f0;
}
.black ul li a:hover{
    text-decoration: none;
    color: #80F9FF;
    font-style: normal;
    font-weight: 400;
    font-family: aguafina-script;
}

#wrapper{
    width: 100%;
    margin: 0 auto;
}

Answer 1

尝试将.nav { list-style: none; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }放入此内容：

    {
        "attribute": {
            "status": "FWD",
            "type": "P2p",
            "cost": "4",
            "role": "Desg",
            "priorityNo": "128.1"
        },
        "hash": "50f74cc4c03637b753e884c4dfbd4270089658e5"
    }

这是一个愚蠢的演示：http://codepen.io/antibland/pen/MyZprK

Answer 2

在您的代码中尝试此操作

.nav{
display:flex;
justify-content:center;
width: 1000px;
list-style: none;
}

Answer 3

这是因为<li>元素有float: left。删除该属性，text-align: center将起作用！不要在<nav>上使用如此多的宽度，边距和填充，在较小的屏幕上看起来很糟糕！

导航链接不会以我的页面为中心

3 个答案: