CSS位置固定和保证金0汽车

所以我有以下CSS背景图片：CSS位置固定和保证金0汽车

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

但导航栏将固定但不居中。如果我删除固定，它将居中，但它不固定。

任何方式来实现这一目标？

来源

2014-02-27 Jared

可能重复[位置绝对和保证金：汽车（http://stackoverflow.com/questions/15961232/position-absolute-and -margin-auto） – essmahr

为你的html添加片段将有助于 – JLewkovich

如何添加html帮助？ ' <链路的rel = “样式表” 类型= “文本/ CSS的” href = “page.css”>

' – Jared

可以进行以下

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

来源

2014-02-27 21:47:08 Moussawi7

完美！谢谢。 – Jared

风格创建.container格：

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

然后withing这个容器在容器中心的建立固定的导航栏:)

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

所以现在导航栏棒。

您可能需要编辑的代码只有top。

来源

2014-02-27 21:42:23

固定和自动是两种不同的东西，你不能一起调用它们。更好的解决方案是创建一个容器div，使用margin：0 auto将它添加到body中，然后再创建另一个div，并将导航放在那里。您可能还想要在该容器div上设置高度。

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

来源

2014-02-27 21:46:48 Severian

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

来源

2014-07-22 17:02:51

CSS位置固定和保证金0汽车

回答

相关问题