尝试将固定菜单div置于页面中心

Question

我尝试了一些不同的规则,但我可以将我的顶级菜单放在中心位置.当我将位置更改为绝对位置或相对位置时,它会转到中心,但由于某种原因,高度会变为100%.我没有设定高度,因为我希望五个孩子的大小.

这是HTML:

<div id="topWrapper">
    <a href="index.html">
        <header id="top_header">
            <h1>MacroPlay Games</h1>
        </header>
    </a>
    <nav id="topnav">
        <ul>
            <a href="index.html"><li>Home</li></a>
            <a href="about.html"><li>About</li></a>
            <a href="video.html"><li>Trailers</li></a>
        </ul>
    </nav>   
</div>

CSS:

#topWrapper {
    border:1px solid #00ffff;
    background-color:#0d0d0d;
    text-align:center;
    position:fixed;
    z-index:9999;
    width: 850px;
    margin: 0px auto;
    float:clear;
}

小提琴:http://jsfiddle.net/kjAAy/

Answer 1

添加margin:0 auto与left:0px; right:0px

#topWrapper {
    border:1px solid #00ffff;
    background-color:#0d0d0d;
    text-align:center;
    position:fixed;
    z-index:9999;
    width: 850px;
    margin: 0 auto; left:0px; right:0px;
    float:clear;
}

DEMO

相同的方法甚至可以工作 position:absolute