2

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

4

4 回答 4

8

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

演示

同样的方法甚至适用于position:absolute

于 2013-02-15T06:02:25.033 回答
1

我注意到原始代码中的一个小错误以及来自 Sowmya 的最流行响应的代码。

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

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

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

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

感谢收听！

于 2014-10-07T12:44:17.960 回答
0 
Position="fixed" is not recommended though.
<div id="someid" align="center">
 --whatever code--
</div>

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

于 2013-02-15T06:19:40.503 回答
0

或者你可以使用：

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

于 2013-02-15T06:23:44.440 回答