试图在页面上居中固定菜单 div答案

【问题标题】：Trying to center fixed menu div on page试图在页面上居中固定菜单 div
【发布时间】：2013-01-31 02:19:27
【问题描述】：

我尝试了一些不同的规则，但我可以让我的顶部菜单居中。当我将位置更改为绝对位置或相对位置时，它确实会到达中心，但由于某种原因，高度会变为 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/

【问题讨论】：

它在我看来是居中的
它会根据屏幕大小进行调整。在足够大的屏幕上，它会向左移动。
但是你在页眉上有一个 850px 的固定宽度。也许应该是min-width？

标签： html css center

【解决方案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

【讨论】：

嗯，这是一个意想不到的解决方案。但是它有效。你能告诉我为什么我需要添加左右吗？
左：0； right:0 删除绝对 div 的默认对齐方式。因此，您可以将 div 与边距对齐。
哦，我明白了。我永远不会发现这一点。谢谢！
我一直对我对 css 的不了解感到惊讶。感谢您的精彩提示

【解决方案2】：

我注意到原始代码以及 Sowmya 最受欢迎的响应代码中存在一个小错误。

更具体地说，有问题的属性是“float: clear;”，据我所知，没有“float: clear;”这样的东西。

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

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

列出的值是“左 | 右 | 无 | 继承”

感谢收听！

【讨论】：

【解决方案3】：

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

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

【讨论】：

"HTML5 不支持
align 属性，请改用 CSS"

【解决方案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

【讨论】：