CSS，修正了jquery水平对齐的标题
我有一个jQuery的问题，我做了一个固定的标题，但是，当它向下滚动时，它不是水平对齐的。 在CSS中，我把margin-left：auto; margin-right：auto; 它做对了，但是当我向下滚动标题是去左侧。
我不知道是在jQuery或CSS中的问题。
非常感谢。
这是我的jQuery：
$(function () {
var HeaderTop = $('#header').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > HeaderTop) {
$('#header').css({
position: 'fixed',
top: '0px',
marginLeft: 'auto',
marginRight: 'auto'
});
} else {
$('#header').css({
position: 'relative',
top: '0px'
});
}
});
});
我的CSS：
html, body
{
height:100%;
}
body
{
margin: 0;
padding: 0;
}
#header
{
width:900px;
height:100px;
background-color:#FFF;
margin-left:auto;
margin-right:auto;
border-top:1px;
border-top-color:#D2D2D2;
border-top-style:solid;
border-bottom:1px;
border-bottom-color:#D2D2D2;
border-bottom-style:solid;
}
header
{
background-color:#FFF;
width:900px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.content
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#header ul
{
list-style:none;
}
#header ul li
{
display:inline;
padding:10px;
}
我的HTML：
<header>
<img src="darkness.png" height="100" />
</header>
<div id="header">
<ul>
<li>Home</li><li>About</li>
</ul>
</div>
<div class="content">
</div>
jsFiddle演示： http : //jsfiddle.net/24ba7
你甚至不需要为此使用JQuery。
你只需要CSS（点击查看实例）：
#header {
position:fixed;
width:900px;
height:100px;
left: 50%;
margin-left: -450px;
}
全屏版本。
为了解释这一点，负边距是您定义的宽度的一半，因为元素基于它们最左上角的中心位于页面上，所以我们通过将其移回一半来弥补这一点。
固定的位置默认为最左边和最远的位置，因此将固定元素居中需要稍微按摩。
但是，正如你看到这是一个CSS解决方案，所以除非你需要使用JQuery，否则我会避免它。 它增加了不必要的开销和复杂性，可以在纯CSS中完成。
JQUERY解决方案
http://jsfiddle.net/24ba7/7/
if ($(window).scrollTop() > HeaderTop) {
$('#header').css({
position: 'fixed',
top: '0px',
left:'50%',
marginLeft: '-450px'
});
您不能在fixed位置使用auto margin ，您需要使用我建议的保证金修正。
你可以像这样添加一个额外的div
<div id="wrapp">
<div id="header">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
与这个CSS
#wrapp{
width:100%;
position:fixed;
top:0px;
}
所以你可以有保证金：0自动; 加工
http://jsfiddle.net/24ba7/6/