Question

所以我有一张带有以下css的背景图片：

 body{
    background-image:url(cover.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
}

背景图片的宽度为1280像素。所以我希望我的导航栏固定并以背景为中心。但是我遇到了问题。这是我的代码。

#navigation {
margin: 0 auto;
position:fixed;
top: 0;
width: 1280px;
height: 35px;
padding-top: 10px;
background-color: #000000;
}

但导航栏将固定但不居中。如果我移除了固定的，它将使其居中但是它不固定。

有任何方法可以实现这一目标吗？

Answer 1

您可以进行以下操作

#navigation {
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1280px;
    height: 35px;
    padding-top: 10px;
    background-color: #000000;
}

Answer 2

.fixed-centered {
    position: fixed; 
    left: 50%;
    transform: translate(-50%);
}

Answer 3

使用样式创建.container div：

//no float!
width:960px;
possition:relative;
margin:0; //centers

然后使用此容器创建固定导航栏:)

position:fixed;
float:left;
width:100%;
height:50px;

所以现在导航栏粘在中心容器中。

您可能需要在此代码上编辑top。

Answer 4

固定和自动是两个不同的东西，你不能一起叫它们。一个更好的解决方案是制作一个容器div，使用margin：0 auto中心，将身体的背景代码添加到身体并将其从身体上取下，然后制作另一个div并将导航放在那里。您可能还想在该容器div上设置高度。

<div class="container">
   <div class="nav">
       <!-- nav here -->
   </div>
</div>

CSS位置固定且边距0自动

4 个答案: