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

Answer 2

我注意到原始代码中的一个小错误，以及Sowmya最热门回复的代码。

更具体地说，有问题的财产是“浮动：清除;”，据我所知，没有“浮动：清除”这样的东西。

不幸的是，由于我刚刚创建了这个帐户，我无法更正错误或回复该帖子。这就是我创建新帖子的原因。

您可以在此处查看W3C的float CSS属性： http://www.w3.org/wiki/CSS/Properties/float

列出的值是“left | right | none | inherit”

感谢收听！

Answer 3

Position="fixed" is not recommended though.
<div id="someid" align="center">
 --whatever code--
</div>

这样做。我建议你应该阅读位置标记的目的。 http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 4

或者您可以使用：

border:1px solid #00ffff;
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index: 9999;
width: 850px;
float: clear;
left: 50%; /* position halfway from the left of screen */    
margin: 0px 0px -425px 0px; /* pull the div into center */ }

小提琴：http://jsfiddle.net/zXFdN/3/

HTML5中不支持

ps align =“center”：http://www.w3schools.com/tags/att_div_align.asp

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

4 个答案: